In IE lightbox doesn't show if a synchronous ajax request is made

Question

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

Answer 1

This smells funny.

Firstly, I can't think of any good reason for using a synchronous request -- doing so locks the user's browser until the response is returned. It's a terrible user experience which would make most users think your website is killing their browser.

Secondly, you say you're doing this for validation? Any user who is malicious enough to try to alter a form while they wait for the asynchronous response would also be smart enough to just change your "async: false" to "async: true". Remember that all validation on the client side is only there for the benefit of the user, and all proper validation should be done server-side. I don't see why you'd need to do things this way.

Answer 2

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();
    }
});

Answer 3

Perhaps you should show the lightbox, and then do a setTimeout before you actually begin the synchronous request. I suspect that IE doesn't render your DOM changes until it gets control back from your JS function, and that doesn't happen until after the ajax request, and the box is hidden again. Give it a chance to render the lightbox, and then start your ajax request.

showLightbox("Please Wait");

setTimeout(function() {
    $.ajax({
        async: false,
        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();
        }
    });
}, 100);

Answer 4

Why is everybody trying to convince Glenn Slaven not to use SJAX? Let is please concentrate on finding a workaround to make this code work on IE. I have the same issue and AJAX is not an option for me. Any help will be appreciated.