Enable Jquery

Asked

Viewed 218 times

1

Example code

What is missing to reproduce the codes of these positorios in localhost mode? I added it to the script header:

<script src="http://www.google.com/jsapi" type="text/javascript"> google.load("jquery","2")</script>

After first answer: Added

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Is still inoperative

jquery

2 answers

2

Try to add $( document ).ready(function() { ... }); around your jquery code. See working:

$( document ).ready(function() {
    $('.oddNum').css('background-color', '#DEA');
$('#DivTwo').css('background-color', '#FCC');

$('#btnOne').click(function() {
    // Action goes here
    $('.oddNum').css('background-color', '#FFF');
});
$('#btnTwo').click(function() {
    // Action goes here
    $('#DivTwo').css('background-color', '#FFF');
});
});
body {
   background-color: #eef; 
   padding: 5px;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DivOne" class="oddNum">One</div>
<div id="DivTwo" class="evenNum">Two</div>
<div id="DivThree" class="oddNum">Three</div>
<button id="btnOne">Reset odd numbers</button>
<button id="btnTwo">Reset even numbers</button>

`

1

If you are using code that makes use of jQuery, it needs to be loaded before any other resource that uses it as dependency.

In the Jsfiddle, this seems irrelevant because just import a resource and ready, the code in the Javascript field works. It turns out that underneath the cloths, before executing the Javascript block, all resources are previously loaded.

And that’s the same way your code should be, importing the resources first (in this case, jQuery) and then making use of its functions.

Very simply, as an example, this code will work:

<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- Fazendo uso do jQuery depois de importado -->
<script>
  $(function(){
    $('body').text('Olá!');
  });
</script>

The following code will not work because jQuery (or $) is undefined. Even, if the snippet and open the browser console, you will see a reference error like this:

Referenceerror: $ is not defined.

<!-- Fazendo uso do jQuery antes de importado -->
<script>
  $(function(){
    $('body').text('Olá!');
  });
</script>


<!-- Importando a biblioteca -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

One way to make the code work is this:

<!doctype html>
<html>

<head></head>

<body>
  <div id="DivOne" class="oddNum">One</div>
  <div id="DivTwo" class="evenNum">Two</div>
  <div id="DivThree" class="oddNum">Three</div>
  <button id="btnOne">Reset odd numbers</button>
  <button id="btnTwo">Reset even numbers</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(function() { // $(function(){}); é o mesmo que $(document).ready(...)
      $('.oddNum').css('background-color', '#DEA');
      $('#DivTwo').css('background-color', '#FCC');

      $('#btnOne').click(function() {
        // Action goes here
        $('.oddNum').css('background-color', '#FFF');
      });
      $('#btnTwo').click(function() {
        // Action goes here
        $('#DivTwo').css('background-color', '#FFF');
      });
    });
  </script>
</body>

</html>

In case you try to import jQuery with the JSAPI, I think the problem is that you are importing a file that does not exist. I don’t know if it’s possible to import by function load(), but in the API page available no jQuery, although there is an example code with google.load("jquery", "1.4.2"); that I believe is only to exemplify.

As libraries hosted have a direct link to the file. And do not make use of the JSAPI. I even made a simple test based on its code and the return displayed on the console was:

Module 'jquery' not found!

  • +1 for the excellent explanation and example.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.