Отображение изображения прогресса при обработке фоновой задачи или отправке формы

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, так как у меня нет href-тега в моем html: $ ("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 для загрузки.Мне кажется наиболее естественным указывать это в атрибуте значения ввода и извлекать его, используя .val().

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

Вот рабочая демонстрация в jsfiddle .