Question

I have the following code:

$("#submit_financials").live('click', function(event){
    event.preventDefault();

    // using serialize here to pass the POST variables to the django view function
    var serialized_data = $("#financials_filter_form").serialize()

    $.post("/ajax/custom_filter/", serialized_data, function(response){
        // create a graph
    });
    $.post("/ajax/force_download/", serialized_data, function(response){
        alert('hello');
    });

});

However, when I do this code, I get the response ‘hello’ before the graph. Why is this happening? And how would I change this such that I get the graph first?

Answer 1

Async, you can never know which function runs\ finish first…

Think on async operations like telling a group of people to run 1 mile, do you know who will finish first? (Yes, Jon skeet, then Chuck Norris…)

You can use the a callack to run the second ajax:

$.post("/ajax/custom_filter/", serialized_data, function(response) {
    // create a graph
    ...
    ...

    $.post("/ajax/force_download/", serialized_data, function(response) {
        alert('hello');
    });
});​