AJAX調用之前更換按鈕，然後恢復通話

Question

回來後我有一個像這樣產生在我的網頁按鈕：

<div class="btn2" id="btPost" onclick="$('#Delete').val('False'); ValidateFormAndAjaxSubmit('frmEditPost', this);" onmousedown="this.className='btn2_click';" onmouseout="this.className='btn2';" onmouseover="this.className='btn2_hover';" onmouseup="this.className='btn2_hover';"> 
<span>Posta</span> 
</div> 

當我有這個JavaScript：

function ValidateFormAndAjaxSubmit(formId, callingElement) { 

    if (IsNotDblClick(callingElement.id)) { 
     var _form = $("#" + formId); 

     var validator = _form.validate(); 
     var anyError = false; 

     anyError = !_form.valid(); 

     if (anyError) { 
      window.latestClick = ''; 
      return false; // exit if any error found  
     } 

     $.post(_form.attr("action"), _form.serialize(), function (data) { 

      if (data.success && data.redirectUrl.length > 0) { 
       window.location.href = data.redirectUrl; 
      } 
      else { 

       var isValid = validateResponse(_form, data); 

       window.latestClick = ''; 
      } 
     }) 
    } 
} 

這是工作沒問題，但問題是我想顯示最終用戶表單正在加載。最好的解決方案可能是簡單地從網頁中刪除callingElement，並將其替換爲臨時禁用（特殊CSS）按鈕。該按鈕需要返回，然後ajax方法完成。

我知道這一點：

$("#regTitle").html("Hello World"); 

但也僅僅是更換的div內的一部分，我做的還需要存儲當前的標記，以比布爾當Ajax調用完成後回去。

如果跨度內的文本也放在臨時按鈕上，這也會很好。

問題是我如何做到儘可能簡單？

Answer 1

這是我如何解決它：

生成這樣的鈕下額外的隱藏的div：

<div class="loadingDiv" id="loadingDiv_btPost"></div> 

與下面的CSS：

.loadingDiv { 
    float:     left; 
    display:    none; 
    height:     26px; 
    width:     60px; 
    background:    url("images/animations/ajaxLoader.gif") no-repeat; 
    background-position: center center; 
} 

然後改變了這樣的javascript：

function ValidateFormAndAjaxSubmit(formId, callingElement) { 

    if (IsNotDblClick(callingElement.id)) { 

     var _form = $("#" + formId); 

     var validator = _form.validate(); 
     var anyError = false; 

     anyError = !_form.valid(); 

     if (anyError) { 
      window.latestClick = ''; 
      return false; // exit if any error found  
     } 

     $('#' + callingElement.id).hide(); 
     $('#loadingDiv_' + callingElement.id).show(); 
     $.post(_form.attr("action"), _form.serialize(), function (data) { 

      $('#loadingDiv_' + callingElement.id).hide(); 
      $('#' + callingElement.id).show(); 
      if (data.success && data.redirectUrl.length > 0) { 
       window.location.href = data.redirectUrl; 
      } 
      else { 

       var isValid = validateResponse(_form, data); 

       window.latestClick = ''; 
      } 
     }) 
    } 
} 

Answer 2

試試這個

$.ajax({ 
    'type': 'POST', 
    'url': _form.attr("action"), 
    'data': _form.serialize(), 
    'beforeSend': function() { 
     $('.btn2').hide(); 
     $('#regTitle').html('Loading ...'); 
     $('#regTitle').show(); 
    }, 
    'success': function() { 
     $('.btn2').show(); 
     $('#regTitle').hide(); 
    }, 
    'error': function() { 
     $('.btn2').show(); 
     $('#regTitle').html('Error ...'); 
    } 
});