¿como usar una la funcion $(document).ready(function(){}) de JS?

Question

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:

me sale así en el navegador Mozilla Firefox:

y mi archivo validacionForm.js donde tengo la funcion:

[ACTUALIZACION] RESUELTO: La libreria jquery debe cargarse antes de cargar tu archivo js:

Si, tengo los dos en una plantilla que me mostrará el contenido: — Angel Zambrano, Sep 17 '17 at 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, Sep 17 '17 at 15:08
¿Es decir que en vez de estar en "vistas/js/js", va a estar en "vistas/js"? — Angel Zambrano, Sep 17 '17 at 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, Sep 17 '17 at 15:14
Gracias juliocpiro, ahora si me funciona! Todo lo que tenia que hacer era eso, gracias por tu ayuda! — Angel Zambrano, Sep 17 '17 at 15:20
colocare la solucion como respuesta para cerrar el tema y des el voto :) — juliocpiro, Sep 17 '17 at 15:21

score 3 · Accepted Answer · edited Sep 17 '17 at 16:24

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.

Sólo señalar que `document.ready` es obsoleto desde jQuery 3, para más detalles [ver esta pregunta](https://es.stackoverflow.com/q/92628/29967). — A. Cedano, Sep 17 '17 at 18:29

juliocpiro · Answer 2 · 2017-09-17T15:37:15.980

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

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>

¿como usar una la funcion $(document).ready(function(){}) de JS?

2 Answers2