代码之家 › 专栏 › 技术社区 › Glenn Slaven

在IE lightbox中,不显示是否发出同步Ajax请求

internet-explorer ajax jquery javascript

Glenn Slaven · 技术社区 · 15 年前

下面的代码显示了一个lightbox“请稍候”框,然后执行同步Ajax请求,该请求在lightbox完成时将其移除。其他地方都可以,但在IE中,灯箱不显示。Ajax请求工作正常,但它似乎忽略了lightbox。

这个 showLightbox 函数就是这样做的,显示一个带有传入文本的模式lightbox。

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替换了lightbox,并在beforesend上执行了jquery.show(),在complete上执行了.hide(),但它也没有显示这一点,因此它似乎与lightbox没有任何关系。如果我打一个 alert() 之后立即 showLightbox() 它确实显示了灯箱

5 回复 | 直到 13 年前

Anthony 15 年前

我的猜测是,要么是因为太忙而无法显示lightbox,要么是因为它认为应该停止执行请求。尝试将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();
    }
});

LPL user462990 13 年前

在Ajax调用中,需要再次调用lightbox功能。我用了碱盒,所以对你来说可能不一样。

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

nickf 15 年前

这闻起来很好笑。

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

其次,你说你这样做是为了验证?任何恶意到在等待异步响应时试图更改表单的用户也将足够聪明,只需将“async:false”更改为“async:true”。记住客户端的所有验证都是只有为了用户的利益,所有正确的验证都应该在服务器端完成。我不明白你为什么要这样做。

Joel Mueller 15 年前

也许您应该显示lightbox,然后在实际开始同步请求之前进行设置。我怀疑IE在从JS函数获得控制权之前不会呈现您的DOM更改,而这在Ajax请求之后才会发生,并且该框再次被隐藏。给它一个渲染lightbox的机会,然后启动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);

Herb Meehan 14 年前

我也有同样的问题。

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

页面底部有一个按钮,可以抓取更多的图片库,这些图片库工作正常。

事情是这样的:如果我在Ajax调用后执行“另存为”并重新加载它,那么它完全可以工作。通过Ajax抓取lightbox项目是有点道理的。