AJAX Cascading DropDown JavaScript event onready

Question

I'd like to fire a JavaScript function when AJAX returns the values of drop down items.

The scenario is:

function 1 fires -> ajax gets items from database -> the dropdown items are filles -> my javascript function is called.

Does any of you have idea how to make a handler for such event ?

Answer 1

As you've tagged the question with jQuery, I'll show you a jQuery solution:

$.post("someScript.php", function(data) {
    /*This callback function is executed when the AJAX call returns successfully
    You would do something with your dropdown items here
    and then call your next function.*/
});

The various jQuery AJAX methods ( post , get , load for example) all provide a way to pass a callback as an argument. The callback is executed upon a successful response from the server. Inside that callback function you can execute whatever code you need to, to deal with data which contains the response.

If you're not using jQuery, I'll assume you already have an XMLHttpRequest object. XMLHttpRequest has a property called onreadystatechange to which you can assign a function that runs when the state changes:

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
        //This will be reached if the call returns successfully
    }
}

The idea is the same as the jQuery method shown above.