Multi-step AJAX process?

[Daniel Evans]

Hi,

the general concept and basic use of AJAX is something which I understand just fine, but now I have come upon an issue that's proving to be troublesome. Here's what is needed:

• The first call to a .php-file returns a variable number of tasks which need to be worked through.
• Each task may or may not have a variable number of sub-tasks which I can only know after its xml-data has been received.
• This must all be done in the proper order, like: task 1, task 2, task 2 sub 1, task 2 sub 2, task 2 sub 3, task 3, task 4, task 4 sub 1, etc.
• It needs only be compatible to Webkit/Chrome/Chromium, jQuery is available.

Now, here is my main problem: I have no idea how to best implement something like this.

My first thought was to create two loops, one for the main list and a second which will be fired every time there's a list of sub-tasks in the result. For all of that to work properly, I'd need to use synchronous calls. The end-users will access this via the Internet and the .php-files may take a second or two since there is a lot of work done server-side. Will a longer execution time be an issue?

Is that a workable concept or are there better ways? I don't need or expect a finished product, but I would appreciate some general help or, if possible, a link to some code with a similar concept, so I can learn it on the way.

[sunfighter]

I think we need an example of what these tasks are and maybe an actual xml file. My question is can the tasks be done server side?

[rnd me]

it would work better using async ajax, sync tend to freeze browser ui, sometimes even on different tabs!

the problem you describe is a good candidate for an event-driven core.
in javascript, that means callbacks.

if you find your code nesting callbacks in such a way that indentations work the code further and further to the right, abandon that code. Not only is it hard to get going, it's a nightmare to maintain.



you will need:
- a central collection of data, events, and status.
- a reusable ajax function with a callback.


since i have no idea what you're trying to do, let's pretend you are displaying the weather for someplace. what place? let's assume the user's geolocation, as provided by window.navigator. it's provided by a callback as well, so it's a good fit. problem is, it gives me lat/lon coords, and my weather API expects zip codes. I need to turn the lat/lon into a zip code, and then query the weather API using that zip.

Weather={


 init: function weather_init(strDivIdForForcastHTML){
   this.div=window[strDivIdForForcastHTML];
   this.stat("Determining Location...");
   navigator.geolocation.getCurrentPosition(this.incomingGeo);
 },
 
 incomingGeo: function _glcb(e){
    this.stat("Looking Up Zip...");
    addScript(
         geo2zipURL+
          "?lon="+e.coords.longitude+
          "&lat="+e.coords.latitude +
          "&cb=Weather.incomingZip"
     );
  } ,

 incomingZip: function _zpcb(e){
   this.stat("Fetching forecast...");
   this.zip=e.postal;
    addScript(
         weathByZipURL+
          "?zip="+e.postal +
          "&callback=Weather.incomingForecast"
     );    
  },

 incomingForecast: function _fccb(e){
   this.stat( "weather for "+this.zip+" : "+ e.results.forecast.html);
 },
 
 
 stat: function _stat(strStatus){
   this.div.innerHTML=strStatus;
 }

}//end Weather object


//usage:
Weather.init("weatherPanel");

note how the dependencies don't nest; events modify this/Weather to store and share data.

while this is a simple demo, the distinction makes a HUGE difference on complex apps.



your problem sounds like it needs 3 callbacks:

-all tasks done
-main task done
-sub task done

if the main task checks to see if the sub tasks are done and calls the next sub-task or main-task IF needed, it can be repeatedly called, from the sub-task callback, until all the sub tasks are done.

another option is to have the subtask callback trigger a counter or amend a LIFO stack and re-dispatch "almost itself" if needed. again, use this.something so that all the callback are seeing/setting the same data.

using nested callbacks can create impossible-to-reach closures, which hide incoming data and make debugging more painful.

save more info than you need at each step, it might be useful later, and doesn't cost much to code or run.

[Daniel Evans]

sunfighter : Well, I may have given a bit of a wrong impression with my initial post. There already exist many lines of PHP code and with each request, the tasks are done server-side. What is left on the client end of things is to a) execute the additional tasks the PHP scripts tell me to, simply by requesting other urls in the proper order as well as keep doing that until everything is done and b) to display the results of said tasks properly in the browser.

I wasn't really asking for someone to write me complicated JavaScript code, but I needed to find a way that allows me to react to the server-side responses. Since I had never done anything like that before, I was stumped.

rnd me has done just that and I'm very grateful for his suggestion to use callbacks. I'll be making myself familiar with the concept and then attempt to build it the right way, without loops, frozen browsers, etc

Thanks for your help!

[sunfighter]

NP Daniel Evans. Just glad you found a solution.