Question

I have a web page which loads select boxes dynamically using jQuery Load Event

jQuery('#opt_test').load('getextra.php?query=ls&id=2').change();

Another select box depends on the data of this one which is bound to the change event.

jQuery('#opt_test').change(function () {
    var test = jQuery('#opt_test').val();
    alert ('var');
    jQuery('#opt_host').load('getextra.php?query=ls&id=4&master=' + test );
})

I have two problems, I can’t seem to raise the change event for #opt_test using the load event above.

If I manually duplicate a part of my code to bypass this issue, I find that the alert displaying the value of the select is before the load completed so it shows the old value.

How can I get this event to trigger after the load as completed?

Answer 1

.load allows you to set a callback function that will be called on completion of the asynchronous call. Otherwise, .change can (and probably does) execute before. Change to:

jQuery("#opt_test").load('url', function () {
   $("#opt_test").change();
});