Javascript – In IE lightbox doesn’t show if a synchronous ajax request is made

ajaxinternet explorerjavascriptjquery

I've got the following code that shows a lightbox 'please wait' box, then does a synchronous ajax request which removes the lightbox when it finishes. Works fine everywhere else, but in IE, the lightbox doesn't show. The Ajax request works fine, but it just seems to ignore the lightbox.

The showLightbox function just does that, show a modal lightbox with the passed in text.

showLightbox("Please Wait");

$.ajax({
    async: true,
    dataType: 'json',
    type: 'GET',
    url: checkValidUrl,
    data: submitData,
    error: function(request, textStatus, errorThrown) {
        valid = false;
    },
    success: function(data, textStatus) {
        valid=true;
    },
    complete: function(request, textStatus) {
        hideLightbox();
    }
});

If I make the ajax requst async it works fine, but I need it to be synchronous because this is a validation method.

Update: Also, if I wrap the whole ajax request in a setTimeout it also works in IE, but that is asynchronous too

Update 2: I just replaced the lightbox with a simple div and did a jQuery .show() on beforeSend and .hide() on complete, and it didn't show that either, so it doesn't seem to have anything to do with the lightbox. If I whack an alert() immediately after showLightbox() it does show the lightbox

Best Answer

My guess is that IE either is too busy doing the request to show the lightbox or that it thinks it's supposed to stop to do the request. Try adding the showLightbox() function to the $.ajax function itself, to the beforeSend option.

$.ajax({
    async: true,
    dataType: 'json',
    type: 'GET',
    url: checkValidUrl,
    data: submitData,
    beforeSend: showLightbox(),
    error: function(request, textStatus, errorThrown) {
        valid = false;
    },
    success: function(data, textStatus) {
        valid=true;
    },
    complete: function(request, textStatus) {
        hideLightbox();
    }
});
Related Topic