I am the lead developer for VroomVroomVroom, and we primarily use ASP.NET for our programming, but also use other web technologies such as Javascript and jQuery to support our web application.  One of the tasks our site does is to gather a list of data from several different sources, and show the combined results in a table, sorted by price.

We do this by our search results page loading with a summary of the search criteria, and then doing a jQuery Ajax call to a handler page that actually goes to get the data and return the results in a formatted HTML document to the calling page.  Now, we wanted to extend on this to add a second table of results from another source, but the new table will be different to the current table of results.

We wanted to do this via another ajax call, and to combine the results together.  The issue I came across was returning the results from the two ajax calls, and displaying the combined results.

A normal javascript (or other procedural programming language) would return the results to a variable for each function, then you can do something with those variables.  When this approach was taken with the ajax calls, the variables that were to hold the results were empty when used to display the info on the page.  The reason was the ajax call was still running when the javascript got to the bit to use the results, as is the nature of an asynchronous function (it runs in the background while other process can continue).

This might seem like a fairly straightforward answer, but if you’ve not used ajax a lot, it can be easily missed.  Anything that uses the response from an ajax function needs to be handled in the “Success” portion of the ajax call.  You can call other functions from here, but don’t rely on the results being available outside of the ajax call, as you can’t guarantee when the call will finish.

The answer to combine the results from two ajax functions was to nest the two functions.  Such as:

$.ajax({
  url: 'searchresults.aspx',
  data: 'searchfor=something',
  cache: 'false',
  success: function(search){
    $.ajax({
      url: 'tools/extrainfo.ashx',
      data: 'moredetails=on+something+else',
      cache: 'false',
      success: function(more){
        countContinue=false;
        $('#tblSearchResults').html(search + more);
        Init();
      },
      error: function(){
        countContinue=false;
        $('#tblSearchResults').html(search);
        Init();
      }
    });
  }
});

What’s happening here:

1. The first ajax function looks for a response.  It gets a response, so the success handler function runs.
2. In the success handler, a second ajax function looks for a different response.  On success, the two results are combined in a table on the html page
3. If the second ajax call fails, it will just show the results from the first ajax call.

This works, for us.  You could go down a different path and keep the two ajax calls completely separate, and have two sections that the results are updated to.  This would not have worked for us, as we wanted to keep the results in a single section of the calling page.

I have a feeling this is a fairly unique issue to our web application, but you never know, someone else out there might find the info useful.

Yay for my first WILT post