jQuery .change() stops working when I remove a debug alert()

Question

So I have the following code at the moment:

<form action="">


<div id="term"><select name="s2" >
<option name="" value="">--Select Term--</option>
</select></div>

<div id="dept"><select name="s3"  >
<option name="" value="">--Select Department--</option> 
</select></div>

<div id="course"><select id='selCourse' value="">
<option name="" value="">--Select Course--</option> 
</select></div>

<div id="sec"><select id='selSec' value="">
<option name="" value="">--Select Section--</option>
</select></div>

<script>
    $('#term').load('fetchcourses.php?');
    alert('It Works');
    </script>
    <script>
    $('[name=s2]').change(function() {
      $('#dept').load('fetchcourses.php?term='+$(this).val());
    });
    </script>

It works as it, however, if I remove the alert('It Works') the code will load the data correctly for the first line, but nothing happens for .change().

I've looked at similar issues on here and other places, and apparently it has to do with asynchronous code? However, I don't really understand what that means, or how to resolve it. Any help is appreciated!

Answer 1

I have not much idea about jquery, but i think $().load fetches asynchronously. So, alert was giving some time to $().change while fetchcourses.php was being loaded in the background when you clicked on the alert dialog box.
But when alert is removed, it jumps straight to change().

Answer 2

Change:

$('[name=s2]').change(function() {

to:

$('[name=s2]').live('change', function() {

The element wasn't in the DOM when .change was called. .live adds the handler when it does appear.

Answer 3

I think you want this:

$('#term').load('fetchcourses.php?', function() {
   $('[name=s2]').change(function() {
       $('#dept').load('fetchcourses.php?term='+$(this).val());
   });
});

The function passed to load() gets executed once the data is loaded. So if $('[name=s2]') actually refers to elements that are contained in the HTML returned from fetchcourses.php, then this should work.
But without telling more about the structure it is difficult to tell...

Answer 4

Try to do:

$('[name='s2']').live("change", function() {
    $('#dept').load('fetchcourses.php?term='+$(this).val());
});

Answer 5

You should try using

$(document).ready(function(){ ...Your code here...  });

Otherwise your code will run too soon and things like $() or .change() will be a bit questionable. I think when you were using an alert you were pausing the execution of the script and effectively mimicking the behaviour of $(document).ready().

Answer 6

I found that the following code worked

$.ajax({
    async: false,
    dataType: "html",
    url: 'fetchcourses.php?',
    data: {},
    success: function(response) {
            $('#term').html('').html(response);
    },
});

As jQuery.ajax allows for asynchronous loading.

EDIT: Apparently the issue had to do with the elements not existing on the page load.