Using Jquery to display a modal "please wait" dialog box message

Question

Hi,

Is it possible to block a page when a user clicks on a link and only enable it once the response has come back from the server. I had a problem recently where a link was clicked on a page several times resulting in two simultaneous changes.

The problem was that the page was allowing multiple submit. I have already resolved this on the server side using Struts saveToken() and isValidToken() to prevent this to happen again. This will ensure that if multiple submits are recieved the second one is not processed.

Now the problem i am having is if the user clicks on the submit link twice, the first request is valid but the second is not. The user is redirected to an error page not realising that the first request did go through.

I think the solution is to block/disable the link when it is clicked. I know you can use javascript to disable the link but i would like to use one of the AJAXy modal dialog boxes that i've seen on several sites. Basicly when you click on the link, a pop dialog shows up with a message "Please wait..". The background is faded out and the user cannot do anything until the response has come back from the server. Most of the examples that i see seem to be Ajax based. My page does not use Ajax.

What is the easiest way to achieve this modal dialog box? I have been looking around and there are several plugins available for JQuery but given that i am new to it i dont quite understand it. Can someone show me an example of how to do this using Jquery?

Thanks

EDIT

Take this for example,

            //CONTROLLING EVENTS IN jQuery
            $(document).ready(function(){

                //LOADING POPUP
                //Click the button event!
                $("#button").click(function(){
                    //centering with css
                    centerPopup();
                    //load popup
                    loadPopup();
                });

                //CLOSING POPUP
                //Click the x event!
                $("#popupContactClose").click(function(){
                    disablePopup();
                });
                //Click out event!
                $("#backgroundPopup").click(function(){
                    disablePopup();
                });
                //Press Escape event!
                $(document).keypress(function(e){
                    if(e.keyCode==27 && popupStatus==1){
                        disablePopup();
                    }
                });

            });

I would like these events to be triggered when i click on a link. The link itself points to another javascript function. i.e.

<a href="javascript:submitform();">confirm</a>

How can i call the jquery bits inside of the submitform() javascript function? Preferabley after the submitform() has completed.

Answer 1

Have a look at jQuery.dialog (website), it allows you to either show in-page divs as modals or alternatively even get your content from another page.

<div id="progress" class="dialogContent" style="text-align: left; display: none;">
<img src="../../global/style/default/images/ajax-loader.gif" style="margin-right: 5px;" />
<asp:literal id="literalPleaseWait" runat="server" text="Please wait..." />
</div>

and then call the function below to show the dialog

 function ShowProgressAnimation() {
    var pleaseWaitDialog = $("#progress").dialog(
    {
    resizable: false,
    height: 'auto',
    width: 150,
    modal: true,
    closeText: '',
    bgiframe: true,
    closeOnEscape: false,
    open: function(type, data) {
    $(this).parent().appendTo($("form:first"));
    $('body').css('overflow', 'auto'); //IE scrollbar fix for long checklist templates
    }
    });
    }

Answer 2

You could overlay a absolutly positioned div layer with transparency that captures any mouseclicks preventing any objects in the page from reacting.

Then an another div ontop of that to display a message.

There are several js libraries to do such things, many which builds on jQuery, so look on jquery modal popup.

Answer 3

Inside you submitform() after you do the form.submit() call the centerPopup() and the loadPopup() directly to show the popup window