jquery script doesn't run in html head

user_621873 0
Viewed 630

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>

head jscript jquery
2 Answers

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

user_32810140
user_96468850
Related