0

I need to show loading image in asp.net page on submit event. I searched for a lot of ideas here and there but did not found a perfect solution for me. Still, I was able to write one myself. Though, one such is here show loading image while the page is loading but I dont think it'll look for page validation.

JS that I call at page submit.

$(document).ready(function () {
    $(this).submit(function () {
        $("#overlay").fadeIn(30);// Call (Show) loading box by default.
        if (Page_ClientValidate() != null) //Check if there is a validation on page.
            {
            if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
                $("#overlay").hide();
            } 
        }
    });
});

Here is my loading div: 

<div style="display: none" id="overlay">
        <div id="modalprogress">
            <div id="theprogress">
                <img alt="Loading... Please wait" src="../App_Themes/Theme1/images/processing.gif">
            </div>
        </div>
    </div>

This div remains hidden by default. As soon as a submit button is clicked, it calls for Page_ClientValidate() method that is used for validation of page. Works fine for me but has few issues.

A button with a different or no ValidationGroup will fire this Page_ClientValidate() of other ValidationGroup present on page, and then shows the error message in validation summary, though it submits the page, but:

  1. It shows the validation summary that is irrelevant/ for a moment (until the requested page is returned).
  2. In case a button with a ValidationGroup is pressed, and a validation error occurs, it would then suppress all the submits/javascript methods that follow.
  3. Any way to call the same in DropDown or CheckBox methods AutoPostBack Events?

Note#: I am trying to avoid the update panel thing, and other ajax call ideas as of now. Just need some optimization in the above code.

Community
  • 1
  • 1
Cyberpks
  • 1,401
  • 6
  • 21
  • 51

1 Answers1

0

You have to determine the selector. As example, use certain class (showLoadingImg) for the button where loading image need to show, doing this you avoid rest of the button click.

$('.showLoadingImg').submit(function () {
    $("#overlay").fadeIn(30);// Call (Show) loading box by default.
    if (Page_ClientValidate() != null) //Check if there is a validation on page.
        {
        if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
            $("#overlay").hide();
        } 
    }
});
Ashwini Verma
  • 7,477
  • 6
  • 36
  • 56
  • That's what I don't want. Lets have an example of an application with around 100 pages and atleast 2 submit buttons in each, then I'll have to code this class in all 200 buttons. I want something (for submit button), that fires automatically when a page is submitted and the validation returns true. – Cyberpks Feb 03 '14 at 07:45
  • Well, to be sure I tried your solution as well, but it seems to be not working at all. – Cyberpks Feb 03 '14 at 07:52