problem managing a sequence of asynchronous functions.

[nelsonm]

hi all,

I'm having a problem managing a sequence of asynchronous functions so that the last function only fires when all the previous asynchronous functions have completed.

I am looping through a function that uses the jquery ajax method to get and populate a work order div that is cloned and appended into a print container div for the purpose of printing the collection of work order divs within the print container div.

I need all of the work order divs to finish being being cloned and appended into the print div before the printElement plugin is called.

The "simplified" process is currently structured as follows:

function printWorkOrders(workorder){
 for(id=0; id <= workorder.length; id++1){
  processWorkorder(workorder[id]);
 }

 // print container contents only when all workorders have been added to the print container.
 $(#print-Container).printElement();
{



function processWorkorder(workorderID){
 $.ajax({
  // get work order data.
  success: function(status) {
   // insert data to $(workorder-container) div elements.

   // copy and append work order to print div container.
   $('#workorder-container').css({'page-break-after':'auto'}).clone().appendTo('#print-container');

  }
 });

How can i get this process to run correctly?

[Fotiman]

Your for loop is a little messy. In particular, it's not clear what this is supposed to do:
id++1
I would suggest changing this to:
for (id = 0; id < workorder.length; id++)

In any case, you know how many requests there are (workorder.length), so you could keep track of some count that increments with each success callback, and inside the callback check to see if the count == the workorder.length (you'll need to store that value), and if so, call printElement.

[nelsonm]

Yea, sorry about the for loop.

Basically what i'm trying to do is loop through the processWorkorder function until all work orders divs are created, cloned and copied to the print div. After all the work order divs are in the print div, then call the printElement plugin to print all the work orders in the print div.

The problem is that since the ajax method in the processWorkorder function is asynchronous, the printElement plugin gets called before any of the work order divs get put into the print div.

In any case, I'll try your suggestion, however...

I was reading about jQuery.when( deferreds ). Isn't this the proper way to handle this type of asynchronous situation?

[Fotiman]

I've never used jQuery.when [api.jquery.com] myself, so hard for me to provide useful feedback. However, reading the documentation, it sounds like you could do something like this:

function afterAjaxSuccess() {
  // print container contents only when all workorders have been added to the print container.
  $(#print-Container).printElement();
}
function processWorkorder(workorderID){
  return $.ajax({
    // get work order data.
    success: function(status) {
      // insert data to $(workorder-container) div elements.
      // copy and append work order to print div container.
      $('#workorder-container').css({'page-break-after':'auto'}).clone().appendTo('#print-container');
    }
  });
}
function printWorkOrders(workorder){
 var id, a = [];
 for (id = 0; id < workorder.length; id++) {
   a[a.length] = processWorkorder(workorder[id]);
 }
 $.when.apply($, a).then(afterAjaxSuccess);
}

Note, the piece I'm not sure on is the actual call to $.when. The problem is that $.when doesn't take an array, it takes 1 or more arguments as an argument list. I'm using the apply method which is usually used to set the scope but which takes an array that will be converted to an argument list. The thing I'm unsure of is what should be passed as the first parameter (ie - what will be treated as this within the function call).

Maybe this will give you a place to start though. :)