2

我正在使用 Jquery Modal Dialog 将一些数据提交到服务器端，然后保存到数据库中；这里我的模态对话框代码是：

    function loadUserDialog(tag, event, target, id) {
            event.preventDefault();

$.validator.unobtrusive.parse('#frmModalPopup');

            var $loading = $('<img src="@Url.Content("~/Content/images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon" style="margin: 150px 150px;">');
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog.empty();
            $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 500
               , modal: true
               , minHeight: 400
               , show: 'fade'
               , hide: 'fade'
              });
            $dialog.dialog("option", "buttons", {
                "Submit": function () {
                    var dlg = $(this);
                    if (IsValidUserName() && $('#frmModalPopup').validate().form()) {
                        $.ajax({
                            url: $url,
                            type: 'POST',
                            data: $(target).serialize(),
                            success: function (response) {
                                var cid = $(response).attr('id');
                                if (cid != null && cid != undefined) {
                                    $(response).fadeIn('slow').appendTo(id);
                                    $(window).scrollTop($('#' + cid).offset().top);
                                }

                                dlg.dialog('close');
                                dlg.empty();
                            },
                            error: function (xhr) {
                                alertMessage("EmailId is already in use!");
                                $.validator.unobtrusive.parse('#frmModalPopup');
                            }
                        });
                    }
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    $(this).empty();
                }
            });

            $dialog.dialog('open');
        };

但是当我一次多次点击提交按钮时（不止一次），表单被提交了不止一次，我得到了重复的数据提交信息。那么您能否告诉我如何禁用双击或多次单击按钮提交。

4

4 回答 4

3

在第一次提交时禁用对话框，在继续之前检查它是否被禁用，如果已经禁用则返回。

"Submit": function () {
  if ($(this).hasClass("disabled"))
    return;

  $(this).addClass("disabled");

  // continue;
}

编辑：您可以使用此方法添加一些额外的用户界面响应能力，方法是在禁用它时添加“正在工作...”或其他消息

$(this).addClass("disabled");
$dialog.append("Working...");
于 2013-03-21T11:52:50.117 回答
0

jquery ui 有一个不错的函数，名为 isOpen()。如果对话框已关闭但我们可以看到它以防止下次单击，我们可以使用函数 isOpen()：

"Submit": function () {
    if( $(this).dialog("isOpen") ){
        YOUR CODE           
    } else {
        return false;
    }
    $(this).dialog("close");
}
于 2014-07-23T09:13:26.797 回答
0

我需要禁用该按钮以避免双击，但我需要在提交异步表单后重新启用该按钮。

为此，我使用了一个窗口变量，它并不优雅但很实用：

function openDialog() {
    window.clickOk = false;
    $("#divAnagrafica").dialog({
      ......
        buttons: [
                {
                    text: "Ok",
                    click: function () {
                        if (window.clickOk === true) {
                            return; 
                        }
                        window.clickOk = true;
                        $("#myForm").submit();
                    }
                },
于 2018-11-23T09:36:41.207 回答
-1

您可以在第一次单击发生后立即禁用按钮上的指针事件：

CSS 属性设置特定图形元素在pointer-events什么情况下（如果有）可以成为指针事件的目标

指针事件：无意味着：

元素永远不是指针事件的目标；但是，如果这些后代将指针事件设置为其他值，则指针事件可能会针对其后代元素。在这些情况下，指针事件将在事件捕获/冒泡阶段期间适当地触发该父元素上的事件侦听器。

click: function (e) {
   //your code to open dialogue etc..
   `$`(e.target).css('pointer-events', 'none');
   //your code}
于 2019-04-10T13:14:54.590 回答