Question

I have an asp.net form. I want to show a jquery progress image while a form is submitted and there is some stuff happening in the backend.

This is my javascript:

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

Clicking on the either images with class set to “bgdiv” is showing the animated gif (as expected), but I want to hide the gif (or div it is wrapped around with) after backend stuff has completed processing. Not sure how to accomplish that. I am not sure if this line is correct in my javacsript since I dont have an href tag in my html: $(“body”).load($(this).attr(‘href’));

Any tips are very much appreciated.

Here is my markup:

<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>

Thanks –

Answer 1

.load() accepts a callback function as a parameter. Add a function as your second parameter in your call to load that hides the progress bar.

Regarding the href, it looks like you’re right – it won’t work as is. You need to tell jQuery the URL to load. It seems most natural to me to specify that in the input’s value attribute and retrieve it using .val().

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

Here’s a working demo at jsfiddle.