使用 Jquery 显示模式“请稍候”对话框消息

Question

是否可以在用户单击链接时阻止页面，并仅在服务器返回响应后才启用该页面。 我最近遇到一个问题，多次单击页面上的链接导致同时发生两个更改。

问题是该页面允许多次提交。我已经使用 Struts saveToken() 和 isValidToken() 在服务器端解决了这个问题，以防止这种情况再次发生。这将确保如果收到多个提交，则不会处理第二个提交。

现在我遇到的问题是，如果用户单击提交链接两次，则第一个请求有效，但第二个请求无效。用户被重定向到错误页面，没有意识到第一个请求确实已通过。

我认为解决方案是在单击链接时阻止/禁用该链接。我知道您可以使用 javascript 来禁用该链接，但我想使用我在多个站点上看到的 AJAXy 模式对话框之一。基本上，当您单击链接时，会出现一个弹出对话框，其中包含一条消息“请稍候..”。背景会淡出，用户无法执行任何操作，直到服务器返回响应为止。我看到的大多数示例似乎都是基于 Ajax 的。我的页面没有使用 Ajax。

实现这个模式对话框的最简单方法是什么？我一直在四处寻找，有几个可用于 JQuery 的插件，但鉴于我是新手，我不太了解它。有人可以向我展示如何使用 Jquery 执行此操作的示例吗？

谢谢

编辑

以这个为例，

            //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();
                    }
                });

            });

我希望当我点击链接时触发这些事件。该链接本身指向另一个 JavaScript 函数。即

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

我如何调用submitform() javascript 函数内部的jquery 位？最好是在 Submitform() 完成之后。

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 图层，以捕获任何鼠标点击，从而防止页面中的任何对象做出反应。

然后在其上放置另一个 div 以显示消息。

有几个 js 库可以做这样的事情，其中​​许多是基于 jQuery 构建的，所以请查看 jquery 模式弹出窗口。

Answer 3

在您执行 form.submit() 之后，在您的 Submitform() 内部直接调用 centerPopup() 和 loadPopup() 以显示弹出窗口