在處理後臺任務或提交表單時顯示進度圖像

Question

我有一個asp.net表單。我想在提交表單時顯示jQuery進度圖像，並且在後端發生一些事情。

這是我的javascript：

<script language="javascript"> 
$(document).ready(function() { 
    $('#progress').hide(); 
    $("#ProjectNavigation input.bgdiv").click(function() {    
     $("#progress").show(); 
     $("body").load($(this).attr('href')); 
     return false; 
    }); 
}); 

點擊帶班設置爲「bgdiv」正顯示出gif動畫（如預期）的任一圖像，但我想隱藏的GIF（或者div包裹着）在後端的東西完成處理之後。不知道如何做到這一點。我不知道這行在我的javacsript中是否正確，因爲我的html中沒有href標記：$（「body」）。load（$（this）.attr（'href'））;

任何提示都非常感謝。

這裏是我的標記：

<table id="ProjectNavigation" class="ProjectNavigation" width="100%"> 
<tr> 
    <td>Title 1</td><td>Title 2</td><td>Title 3</td><td>Title 4</td> 
</tr> 
<tr> 
    <td class="HelpGuidanceLink">Comments 
     <div id="progress" style="padding:20px 0 0 35px;"> 
      <img src="/_layouts/images/progress-image.gif"> 
     </div> 
    </td> 
    <td colspan="3"> 
     <textarea name="CommentsTextBox" rows="3" cols="20" id="CommentsTextBox" class="ProjectGuideTextBox"> 
      other comments testing... 
     </textarea> 
    </td> 
</tr>  
<tr>   
    <td colspan="4"> 
     <input type="image" name="PreviousPhaseImageButton" id="PreviousPhaseImageButton" class="bgdiv" src="/images/previous-phase-arrow.png" /> 
     <input type="image" name="NextPhaseImageButton" id="NextPhaseImageButton" class="bgdiv" src="/images/next-phase-arrow.png" />    
    </td>  
</tr> 

謝謝 -

Answer 1

​​接受一個回調函數作爲參數。添加一個函數作爲您調用加載時隱藏進度條的第二個參數。

關於href，看起來你是對的 - 它不會按原樣工作。你需要告訴jQuery加載的URL。對我來說，在輸入的值屬性中指定它並使用.val()來檢索它似乎是最自然的。

$("body").load($(this).val(), function (responseText, textStatus, XMLHttpRequest) { 
    $('#progress').hide(); 
}); 

這是working demo at jsfiddle。