在处理后台任务或提交表单时显示进度图像

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。