How to prevent double submit with jQuery in ASP.NET app with UpdatePanels

I have an Intranet ASP.NET application which is sometimes slow to respond. My requirement is to prevent double submit, and ideally provide feedback to the user that the form has already been submitted.

Examples I've found show how to disable a submit button, but that's not enough, as in my app the submit can happen:

From a submit button.
From any control with AutoPostBack = true (which submits using javascript AFAIK).
From either of the above within an UpdatePanel - in which case as I understand it, the POST is done using AJAX, and I would need to re-enable when the AJAX call is complete.

I'm thinking of something like displaying an overlay / modal popup, perhaps with an animated progress image which would be displayed while submitting. And in the case of an UpdatePanel, hidden when the AJAX call completes.

Does anyone have a sample that can be easily integrated into ASP.NET pages as above? Or indicate what events I would need to hook into to display / hide the overlay.

UPDATE

@Aristos' answer has got me most of the way there. The key part is to handle PageRequestManager.endRequest to hide the progress dialog when an AJAX call is complete.

There is one case where I still have a problem: if a submit button results in a file download, I don't have an event I can use to hide my progress dialog. This question has an answer which may do the trick, I'll try it out.

You place an allow/not allow to submit form base on a flag, as:

Page.Form.Attributes["onsubmit"] = "return fAllowToSubmit();";

and you open close the flag for the submit when you send via updatepanel and wait for return.

 <script type="text/javascript"> 
    var _fAllowToSubmit = true;
    // here you can throw and an alert() when _fAllowToSubmit==false
    function fAllowToSubmit() 
     {
        if(!_fAllowToSubmit)
          alert("Please wait for the page to be updated");

       return _fAllowToSubmit;
     }

    // to avoid calling it before the Sys loaded
    jQuery(document).ready(function() {
      var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
    });

    function InitializeRequest(sender, args) {
       _fAllowToSubmit = false;
       // to make it even nicer you can place here a fade css class
       // it will auto-clear with the next update.
       jQuery("#YourWarpDiv").addClass("FadedDiv");
    }

    function EndRequest(sender, args) {
        _fAllowToSubmit = true;
    }
</script>

and the

.FadedDiv
{
    background-color: white;
    filter:alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity:0.50;
}

Of course you have also the "please wait" message that can open automatically with the update panel.

Recommended topics

Hot tags