3

Mi problema es que quiero usar esa función para varias paginas, solo que no quiero estar colocando en todas ellas el <script></script> es muy agotador.

Verán, estoy comenzando a usar Alertify.js y quiero usar dicha función en un archivo js aparte, solo que me sale esto en el navegador:

ReferenceError: $ is not defined

esto porque tengo la función así:

$(document).ready(function() {
    $("#butonanon").click(function(){
        alertify.alert('hola mundo'); 
    });
});

Imagen referencia error:

introducir la descripción de la imagen aquí


me sale así en el navegador Mozilla Firefox: introducir la descripción de la imagen aquí

y mi archivo validacionForm.js donde tengo la funcion: introducir la descripción de la imagen aquí

[ACTUALIZACION] RESUELTO: La libreria jquery debe cargarse antes de cargar tu archivo js: introducir la descripción de la imagen aquí

6
  • Si, tengo los dos en una plantilla que me mostrará el contenido: <script type="text/javascript" src="vistas/js/js/jquery-3.2.1.js"></script> <script type="text/javascript" src="vistas/js/js/alertify.js"></script> el 17 sep. 2017 a las 15:01
  • el jquery debe estar import antes del validacionForm.js, ponlo antes que todos mejor. añade esa imagen a la pregunta y luego borrala, las respuestas deben contener eso, solo respuestas
    – juliocpiro
    el 17 sep. 2017 a las 15:08
  • ¿Es decir que en vez de estar en "vistas/js/js", va a estar en "vistas/js"? el 17 sep. 2017 a las 15:11
  • publica la parte del head donde importas todos los archivos js, aparentemente ahi esta el problema, el Js de jquery deb estar primero para que luego los demas tengan disponible el $ de jquery
    – juliocpiro
    el 17 sep. 2017 a las 15:14
  • Gracias juliocpiro, ahora si me funciona! Todo lo que tenia que hacer era eso, gracias por tu ayuda! el 17 sep. 2017 a las 15:20

2 respuestas 2

3

Pues si te sale eso es porque te falta la libreria JQuery, podrias solucionar agregando la siguiente linea codigo <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ejemplo:

$(document).ready(function() {
    $("#butonanon").click(function(){
        alertify.alert('hola mundo'); 
    });
});
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.0/build/css/alertify.min.css"/>
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.0/build/alertify.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="butonanon">Clikeame</button>

Nota: La versión depende de ti.

1
  • Sólo señalar que document.ready es obsoleto desde jQuery 3, para más detalles ver esta pregunta.
    – A. Cedano
    el 17 sep. 2017 a las 18:29
1

Asegurate de tener importada la libreria de jQuery y que esta este importada antes de tus otros archivos Javascript.

Aparentemente ahi esta el problema, el js de jquery debe estar primero para que luego los demas tengan disponible el $ de jquery.

Segun tu imagen, jquery esta despues de validacionForm.js

introducir la descripción de la imagen aquí

Debería estar aprox asi:

<head>
<script src="/js/js/jquery-3.2.1.js"></script>
<script src="/js/validacionForm.js"></script>
<script src="/js/validacionBotones.js"></script>
</head>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.