[送信]ボタンのクリック後に読み込みの進行状況を追加する方法

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

あなたが作成していることは、サーバーへのGET/POSTのいずれかの種類の予想Javascriptのアプローチではありません。

"MandatoryNotes.jsp"ページでAJAXをPOSTする必要があります。 これで、AJAX呼び出しが終了したときにコールバックができます。 jQueryを使ってAJAXコールの

例：あなたはAJAX呼び出しを持っていますが、あなたがであなたの目標を達成することができAJAX with 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); 
      } 
      }); 
     } 
} 

がチェックこれを、それはいくつかの詳細情報を提供しますユーザーが送信ボタンを押したときにアニメーション画像をDOMに追加/表示/ブロックするだけで、AJAXコールの「成功」/「不可視」/「画像なし」を追加できます。

あなたのGIFコンテナのスタイルを変更することと同じ

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

：jQueryを使って

を画像の追加と削除

はinnerHTMLとremoveChildやjQueryを使ってを使用してJavascriptのいずれかを介して、プレーンJavaScriptで行われます：

または

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