Question

My application is backed by a complex database architecture, heavy in foreign key restraints which result in my JavaScript being riddled with callback handlers. For a single action, such as creating a new order, there may be as many as three XHR’s required to submit all the necessary data for processing.

Currently, I am handling this in what I feel is a rather ungraceful or at the very least, a bit sloppy means…

/** -- PSEUDO CODE -- */
myOrder.save({
    success: function()
    {
         /** This request handled inserting the main attributes of the model
             into the database, which means it is safe to fire off additional
             requests */
         myOrderContents.store.sync({
                success: function()
                {
                    /** Possibly fire another request here, that is dependent on
                        the first two requests returning successfully, or maybe
                        execute code that is also dependent on these requests.
                      */
                }
         });
    },
    failure: function()
    {
    /** Handle Failure Here */
    }
});

I realize another viable approach would be something along the lines of all requests calling one callback method, which would then only execute a certain chunk of code….

myOrder.save({callback: executeAfterRequests});
myOrderContents.store.sync({callback: executeAfterRequests});
myOtherObject.save({callback: executeAfterRequests});

executeAfterRequests: function()
{
    if(requestA.isComplete() && requestB.isComplete() && requestC.isComplete())
    {
    /** Execute some code after all requests have been completed... */
    }
}

Given that ExtJS dev’s are strongly opposed to synchronous request, is my best bet here to extend the base AJAX class and implement a Queue? Or, accept the nature of AJAX and continue on my merry way with nested success functionality?

Thank you for your input.

Answer 1

Why not send all of the needed data to the server together? You can create your records in steps on the server and return when all is done.
There are examples out there with form wizards that can take users through a long process of collecting data screen by screen but submits all of it at the end.