Question

我有一个提交按钮来调用名为mandatoryNotes()的函数。加载一个新的寡妇需要几秒钟。我需要显示一个gif图像和页面叠加来阻止用户交互，直到加载完成。

我该怎么做？

<div class="em" id="formsubmitbutton">
    <input type="button" name="Submit" value="Submit" class="buttonEm" onClick="mandatoryNotes()">
</div>

function mandatoryNotes(){
    var formvalue = "invoiceAttributesDetailsFORM";
    validateInput(document.invoiceAttributesDetailsFORM);
    var queryString;
    if (checkValidation == "true") {

        submitSpecialBidDetails(document.invoiceAttributesDetailsFORM);
        queryString = "&EUAM_SELECTED_FORM=" + formvalue;
        var legendURL = "/EUAM/ADRGateway?jadeAction=MANDATORY_NOTES_ACTION_HANDLER";
        var winData = 'scrollbars=yes,resizable=yes,status=yes,width=500,height=500';
        window.open("MandatoryNotes.jsp", "ADDVIEWNOTES",winData);
        window.close();
    }
}

Answer 1

您正在创建的内容不是针对服务器的任何类型POST / GET的预期Javascript方法。

您必须在“MandatoryNotes.jsp”页面上使用 AJAX 进行POST。这样，当AJAX调用完成时，你就会有一个回调。

使用jQuery进行AJAX调用的示例：

    function mandatoryNotes(){
        var formvalue = "invoiceAttributesDetailsFORM";
        var queryString = "&EUAM_SELECTED_FORM=" + formvalue;
        var legendURL = "/EUAM/ADRGateway?jadeAction=MANDATORY_NOTES_ACTION_HANDLER";

        validateInput(document.invoiceAttributesDetailsFORM);

        if (checkValidation == "true") {
          submitSpecialBidDetails(document.invoiceAttributesDetailsFORM);

          jQuery.ajax({
            url: "MandatoryNotes.jsp",
            data: queryString,
            success: function(response){
              console.log(response);
            }
          });
        }
}

检查一下，它会提供更多信息： AJAX with jQuery

当您进行AJAX调用时，只需在用户按下提交按钮时添加/可视/阻止DOM中的动画图像，并在AJAX调用“成功”时删除/隐藏/无图片。

使用innerHTML和removeChild或使用jQuery，使用简单的Javascript通过Javascript添加和删除图像：

jQuery('#MY_CONTAINER').append("<div id='AJAXLoader'><img src='myAJAXLoader.gif'></img><div>");
jQuery('#MY_CONTAINER').remove();

与更改Gif容器的样式相同：

使用jQuery：

jQuery('#AJAXLoader').css("visibility" , "visible");
jQuery('#AJAXLoader').css("visibility" , "hidden");

OR

jQuery('#AJAXLoader').css("display" , "block");
jQuery('#AJAXLoader').css("display" , "none");

普通Javascript

document.getElementById('AJAXLoader').style.visibility = "visible";
document.getElementById('AJAXLoader').style.visibility = "hidden";

OR

document.getElementById('AJAXLoader').style.display = "block";
document.getElementById('AJAXLoader').style.display = "none";

如何在“提交”按钮单击后添加加载进度

1 个答案: