Question

$("#keywordSearchSubmit").on("click", function()
{
    showOverlay();
    var searchString = $("#search-results-form-query").val();
    var manResult = $.ajax({
        url: "Order?Page=storeSearchKeyword",
        data: "searchString="+searchString,
        async: false
    }).responseText;
    $("#cart-product-list").empty();
    $("#cart-product-list").append(manResult);
    hideOverlay();
});

function showOverlay()
{
//alert('a');
 $("#overlay").css("display","block");
//document.getElementById("overlay").style.display = 'block';
}

function hideOverlay()
{
//alert('b');
$("#overlay").css({"display":"none"});
//document.getElementById("overlay").style.display = 'none';
}

我有上面的Javascript，以便在执行ajax调用时出现叠加层。以下是叠加层的HTML。

<div id=\"overlay\" style=\"display:none;\">
<div style=\"display:block; margin-left: auto; margin-right: auto; margin-top:15%\" class=\"bubblingG\">
<span id=\"bubblingG_1\"></span><span id=\"bubblingG_2\"></span><span id=\"bubblingG_3\">
</span></div></div>

无论我使用上述哪种javascript，叠加层都不会显示：

... document.getElement $（ “＃覆盖”）......

叠加显示的唯一时间是我添加警告框。点击警告框中的“确定”后，将显示叠加层。

我试过了：

$("#overlay").trigger("create");

但没有成功。我知道我可以使用jQuery启动和完成而不是调用上面的方法，但它仍然只会在我显示叠加层之前显示。

请求大约需要5秒钟才能在服务器端进行处理，因此应该明确显示叠加层。

Answer 1

我想这与同步AJAX调用有关（参见jQuery documentation about AJAX settings)。我会尝试将代码修改为类似

showOverlay();
var searchString = $("#search-results-form-query").val();
$.ajax({
    url: "Order?Page=storeSearchKeyword",
    data: "searchString="+searchString,
    success: function (data, textStatus, jqXHR) {
        var manResult = jqXHR.responseText;
        $("#cart-product-list").empty();
        $("#cart-product-list").append(manResult);
        hideOverlay();
    }
});

Ajax覆盖在ajax请求期间未显示

1 个答案: