Using jQuery to display a modal Wait message

Question

Is it possible to block the page when the user clicks on the link and only activates it as soon as the response returns from the server. I recently had a problem where a link was clicked on a page several times, which led to two simultaneous changes.

The problem was that multiple submit was allowed on the page. I already solved this on the server side using Struts saveToken () and isValidToken () so that this does not happen again. This ensures that if multiple shipments are received, the second will not be processed.

Now the problem is that the user double-clicks on the send link, the first request is valid, and the second is not. The user is redirected to the page with the error, not realizing that the first request has passed.

I think the solution is to lock / disable the link when clicked. I know that you can use javascript to disable the link, but I would like to use one of the AJAXy modal dialogs that I have seen on several sites. Basically, when you click on a link, a pop-up dialog appears with the message "Please wait ..". The background disappears, and the user cannot do anything until the response returns from the server. Most of the examples I see seem to be based on Ajax. My page does not use Ajax.

What is the easiest way to achieve this modal dialog box? I look around and there are several plugins available for jQuery, but given that I am new to this, I do not quite understand. Can someone show me an example of how to do this using jQuery?

thank

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 fire when I click the link. The link itself points to another javascript function. those.

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

How can I call jquery bits inside javascript of submitform () function? Preferably after submit () is complete.

Answer 1

jQuery.dialog(-), div , , , .

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

,

 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

div , mouseclicks, .

div, .

js- , jQuery, jQuery .

Answer 3

submitform() , form.submit(), centerPopup() loadPopup(),