jquery script doesn't run in html head

Question

Why would a piece of jquery script code not work in HTML head code?

Here's the working code:

I use the "Network" tab in Firefox' Web Developer tools to test it. When I run the first code snippet, I can see that it post the details as http://localhost/creditapp/test1.php?mode=No and http://localhost/creditapp/test1.php?mode=Yes when I change the toggle, but with the 2nd piece of code it doesn't post to the URL at all.

 <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 

 

  </head>
  <body>
    
      <input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">
     

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>
  
  </body>
  </html>

When I move the jquery script piece of code to the html head, it doesn't post the data to the URL:

 <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>

  </head>
  <body>
    
      <input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">
     

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>
  
  </body>
  </html>

Nawed Khan · Accepted Answer · 2019-07-16T13:56:47.967

2

Because the code in HEAD section runs before the elements in BODY are loaded and document is ready. That is why Jquery is almost always enclosed in

$( document ).ready(function() {
    //your code goes here
});

So that none of the script is executed UNTIL all elements, hence document, are fully loaded.

In your case when you move the code to body it works because fortunately by then all elements that you need for your purpose are already loaded and ready to play with.

JQuery - Document ready

edited Jul 16 '19 at 13:56

answered Jun 24 '19 at 06:44

Nawed Khan

4,393
1
10
22

Thanx. This worked. Why would other scripts that are in the HEAD, work without this tag though? – SilverNodashi Jun 24 '19 at 09:26
probably because they are not using jquery and not using any element from body that needs to be loaded first. A good practice is to load your external javascripts right before closing body tag and always enclose the jquery (and even regular code) in document ready block. – Nawed Khan Jun 24 '19 at 15:02

Jovan · Answer 2 · 2019-06-24T07:09:36.740

1

It's maybe a good option to use the newest jQuery version:

&ltscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">&lt/script>

(also, you can use three additional CDN links).

Or you can add jQuery as JS file.

Links:

https://www.w3schools.com/jquery/jquery_get_started.asp

https://jquery.com/download/

edited Jun 24 '19 at 07:09

answered Jun 24 '19 at 06:57

Jovan

36
1
4

1

While using the latest version of jQuery is best practise (and important in this case since the one being used doesn't get security updates), it won't solve the problem. – Quentin Jun 24 '19 at 07:12
I am following tutorials found on the net and use the code they use, but will update the code on my side to use the newest version of jquery once I get it working properly. – SilverNodashi Jun 24 '19 at 09:27

jquery script doesn't run in html head

2 Answers2