Question

我有以下代码显示灯箱'请等待'框，然后执行同步ajax请求，在完成后删除灯箱。在其他地方工作正常，但在IE中，灯箱不显示。 Ajax请求工作正常，但似乎忽略了灯箱。

showLightbox函数只是这样做，显示带有传入文本的模态灯箱。

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

如果我让ajax请求异步它工作正常，但我需要它是同步的，因为这是一种验证方法。

更新：另外，如果我将整个ajax请求包装在setTimeout中，它也适用于IE，但这也是异步的

更新2 ：我刚用一个简单的div替换了灯箱，并在完成后在beforeSend和.hide（）上执行了jQuery .show（），它也没有显示，所以它似乎与灯箱没有任何关系。如果我在alert()之后立即重击showLightbox()，它会显示灯箱

Answer 1

我的猜测是，IE要么太忙于执行显示灯箱的请求，要么认为它应该停止执行请求。尝试将showLightbox（）函数添加到$ .ajax函数本身，添加到beforeSend选项。

$.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 2

在您的ajax通话中，您需要再次调用灯箱功能。我使用过Lytebox，所以对你来说可能有所不同。

$j.post("kitchen.php", $j("#post_form").serialize(),function(result) {
    //xmlhttp.open("GET","ajax_test.php",true);
    //xmlhttp.send();
    $j('#grab_kitchen').attr({'disabled' : 'false'});
    $j('#grab_kitchen').removeAttr('disabled');
    $j('#Output').fadeIn(500);
    $j('#Output').html(result);
    $j("body").css("cursor", "auto");

    // add there your lytebox function to work
    initLytebox();
});

Answer 3

这闻起来很有趣。

首先，我想不出使用同步请求的任何好理由 - 这样做会锁定用户的浏览器，直到返回响应为止。这是一种糟糕的用户体验，会让大多数用户认为您的网站正在杀死他们的浏览器。

其次，你说你这样做是为了验证吗？任何恶意到足以在等待异步响应时尝试更改表单的用户也会非常聪明，只需将“async：false”更改为“async：true”即可。请记住，客户端的所有验证仅，以便用户受益，并且所有正确的验证都应在服务器端完成。我不明白为什么你需要这样做。

Answer 4

也许您应该显示灯箱，然后在实际开始同步请求之前执行setTimeout。我怀疑IE不会渲染你的DOM更改，直到它从你的JS函数获得控制权，并且直到ajax请求之后才会发生这种情况，并且该框再次被隐藏。给它一个渲染灯箱的机会，然后开始你的ajax请求。

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 5

我有同样的问题。

http://www.precisehomebuilders.com/kitchen-remodeling

页面底部有一个按钮可以抓取更多照片画廊。

这就是事情：如果我在ajax调用之后执行“另存为”并重新加载它，那么它完全有效。只是通过ajax抓取灯箱项目。

在IE中，灯箱不显示是否发出了同步ajax请求

5 个答案: