Problem with Events on AJAX-heavy page

Question

I have an asp page that uses jQuery ajax to load member counts into a bunch of divs after a page is loaded.

It works perfectly well in FireFox, and with clients that have a small number of groups.

For the small number of clients that have many groups (500+), I am getting an error in IE. The ajax calls seem to be running synchronously, because the click events won't register until every ajax call has returned.

The series of ajax requests is just 1 request for most clients. It is only broken up into multiple requests for clients with a VERY large number of groups.

Now, I've seen the bug where $("a").click functions are not bound if links are added after the DOM is loaded. The links that aren't working are not being loaded by ajax, they do not fall into this category.

Here is the pseudocode:

ready()
{
    // count the number of groups that this user has, adding the ids to a list
    if( count < 50 )
    {
        runAjax();
    }
    else
    {
        // this calls the ajax request on groups of 50 ids
        // it pauses briefly after each request by using setTimeout to call the next
        runAjaxRecursively();
    }
}

And here is the ajax request:

// run the HTTPRequest
$.ajax({
    async: true,
    type: "POST",
    url: "emailcatcount.asp?idList="+idList,
    data: "idList="+idList,
    dataType: "html",
    success: function(html) { // blah blah blah }
});

Anyway, the code works fine, so please consider any errors as typos. The only problem is that, in IE, click events won't fire until every single ajax call has returned.

Does anyone know why this would occur? Notice that I am setting async to true.

Does it have anything to do with how jQuery's ready event is processed in IE?

I am bewildered, and have spent a few days on this, so any ideas are appreciated.

Answer 1

Your issue is that you do not give the browser time, try adding a little setTimeout in the recursive loop to give the browser time to process other events, remember you have only one thread to play with. You would be better served trying to make just one call and use jtemplates together with json to process the data and render the markup rather than returning heavy html.

Also the bug you refer to is not a bug, jQuery only binds handlers for elements that exist at that time. If you have dynamic content you are better using event delegation to handle the click events of dynamic elements. This way you do not explicitly bind each element but bind the click event to a static container. You can then query the event.target to see if it was one of your desired elements that invoked the event and if so process the desired behaviour. The benefit is you do not burden the dom with multiple bound events and dynamic content works.

Answer 2

Is the success function updating table content? IE large table rendering is pretty horrible.