如何在提交按鈕點擊後添加加載進度

我有一個提交按鈕來調用名爲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(); 
    } 
}

來源

2016-06-25 Mukesh Paniker

[jQuery的文件上傳進度條（可能的重複http://stackoverflow.com/questions/15410265/file -upload-進度條與 - jQuery的） –

你所創建不是任何樣的POST的預期JavaScript方式/ GET到服務器。

您必須使用AJAX才能在您的「MandatoryNotes.jsp」頁面上POST。這樣你就可以在AJAX調用完成時有一個回調。

AJAX調用使用jQuery的例子：

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調用，您可以通過實現自己的目標只需在用戶按下提交按鈕並在AJAX調用的「成功」中刪除/不可見/不顯示圖像時，在DOM中添加/可見/阻止動畫圖像即可。

添加和刪除的圖像將通過JavaScript來實現或者與普通的JavaScript使用innerHTML和removeChild或使用jQuery：

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");

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

普通的JavaScript

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

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

來源

2016-06-25 11:58:34 Strahdvonzar

如何在提交按鈕點擊後添加加載進度

回答

相關問題