jQuery ajax success chaining Internet Explorer Issues

Question

I have a jQuery ajax function that retrieves JSON data. In the success block I call another function to parse the data and update the page. At the end of this parsing/updating function a different ajax call is made. This works perfectly in all browsers except Internet Explorer (7 and 8). The problem is Internet explorer thinks the script is taking too long to process because the success block from the first ajax call doesn't complete until the 2nd ajax call finishes.

I get the message: "Stop running this script? A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive."

My jQuery code:

$("#id_select").bind("change", function(e){
  $.ajax({
    url: "/retrieve_data.js",
    data: {id:$(e.target).children(":selected").attr("value")},
    type: "get",
    dataType:"json",
    success: function(data, status, form){              
      processData(data);
    },
    error: function(response, status){
      alert(response.responseText);
    }
  });
})

Any suggestions on how to get IE to stop timing out or to accomplish this task without rewriting all my jQuery functions would be appreciated.

Answer 1

I actually wrote something that may take care of this for you if you can break up your code a little bit. You'll actually need a few things. The first is this extension to jQuery that creates Work Queues: http://code.ghostdev.com/posts/javascript-threading-revisted-jquery. Once you've got that in place and tested a little bit, it can be extended further to create an AJAX Queue: http://code.ghostdev.com/posts/javascript-threading-ajax-queueing.

For my personal situation I had an AJAX request that retrieved a pretty hefty JSON block and I couldn't process it all when it returned without producing unresponsive script warnings. This lets the function return, but continues to process on regular, configurable intervals until it's processed through the entire block.

Answer 2

My solution actually ended up being refactoring the whole thing. I think this works out better, instead of doing an Ajax query, parsing those results, updating the page, and then doing another Ajax query within the success block I ended up just returning all JSON needed to update the page on each request. So each request will return more data and then pass that data onto other functions that update the page. This actually makes things go quicker since there are less requests and IE doesn't puke all over the place.

During my refactoring I did come across an issue where calling $("#selector").empty() was required before updating the html.

Before:
var my_new_html = ...;
$("#selector").html(my_new_html);

After:
var my_new_html = ...;
$("#selector").empty().html(my_new_html);

Emptying the contents first before updating caused IE to no longer come back with the stop responding error.

Hope this helps some people.