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 に答える