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

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

.load() 接受回调函数作为参数。在加载调用中添加一个函数作为第二个参数，以隐藏进度条。

关于 href，看起来你是对的 - 它不会按原样工作。您需要告诉 jQuery 要加载的 URL。对我来说，在输入的 value 属性中指定并使用 .val() 检索它似乎是最自然的。

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

这是jsfiddle 的工作演示。