Ordering of asynchronous javascript events

Question

I have the following code:

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

    // using serialize here to pass the POST v         


        

Answer 1

option 1 is to nest the post requests (gdoron's response). If this is not possible/practical, you can use a mutually scoped variable as a flag (change value in the response callback functions and then use setTimeout and recursion (or setInterval) to keep looking for a change in your "flag" variable and when you see it change, then pop the next $.post request

Answer 2

You can try using deferred objects If you want to generate graph before alert but want both calls to be completed.

$.when (
   $.post("/ajax/custom_filter/", serialized_data),
   $.post("/ajax/force_download/", serialized_data)
).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
    custom_filter and force_download post requests  */
   var customFilterResponse = a1[2]; 
   /* arguments are [ "success", statusText, jqXHR ] */

   //generate graph.

   alert('hello');
});

Answer 3

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');
    });
});​