how to use a function $ (document) .ready (function () {}) of JS?

2

My problem is that I want to use that function for several pages, I just do not want to be placing the <script></script> in all of them, it's very exhausting.

You see, I'm starting to use Alertify.js and I want to use that function in a js file, only that I get this in the browser:

  

ReferenceError: $ is not defined

this because I have the function like this:

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

Error reference image:

I get this way in the Mozilla Firefox browser:

and my file validacionForm.js where I have the function:

[UPDATE] RESOLVED: The jquery library must be loaded before loading your js file:

    
asked by Angel Zambrano 17.09.2017 в 16:53
source

2 answers

2

Well, if you get that, it's because you're missing the library JQuery , you could solve by adding the following line code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Example:

$(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>

Note: The version is up to you.

    
answered by 17.09.2017 / 17:22
source
1

Make sure you have imported the jQuery library and that it is imported before your other Javascript files.

Apparently there is the problem, the js de jquery must be first so that then the others have available the $ of jquery.

According to your image, jquery is after validationForm.js

It should be about like this:

<head>
<script src="/js/js/jquery-3.2.1.js"></script>
<script src="/js/validacionForm.js"></script>
<script src="/js/validacionBotones.js"></script>
</head>
    
answered by 17.09.2017 в 17:25