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> Commented el 17 sept. 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
    Commented el 17 sept. 2017 a las 15:08
  • ¿Es decir que en vez de estar en "vistas/js/js", va a estar en "vistas/js"? Commented el 17 sept. 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
    Commented el 17 sept. 2017 a las 15:14
  • Gracias juliocpiro, ahora si me funciona! Todo lo que tenia que hacer era eso, gracias por tu ayuda! Commented el 17 sept. 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/[email protected]/build/css/alertify.min.css"/>
<script src="//cdn.jsdelivr.net/npm/[email protected]/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
    Commented el 17 sept. 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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