2013-03-21 59 views
2

我正在使用Jquery模式對話框提交一些數據到服務器端,然後保存到數據庫;我在這裏的模態對話框代碼:如何禁用雙擊Jquery模式對話框按鈕?

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'); 
     }; 

但是,當我做的時候提交按鈕多次點擊(不止一次),然後提交表單不止一次和我重複數據提交的信息。所以,你能告訴我如何禁用雙擊或不止一次點擊提交按鈕。

+0

你所做的是.NET和MVC標籤。根本沒有jquery標籤! – 2013-03-21 11:48:48

+0

如何停止提交兩次發射? – Liam 2013-03-21 11:53:29

回答

3

第一次提交時禁用對話框,檢查在繼續之前它是否被禁用,如果已經禁用則返回。

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

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

    // continue; 
} 

編輯:您可以使用此方法來添加一些額外的用戶界面響應,加入了「工作...」或一些其他的消息,當您禁用它

$(this).addClass("disabled"); 
$dialog.append("Working..."); 
0

jQuery用戶界面也不錯函數名爲isOpen()。 如果對話框關閉,但我們可以看到,以防止下一次點擊,我們可以使用函數ISOPEN():

"Submit": function() { 
    if($(this).dialog("isOpen")){ 
     YOUR CODE   
    } else { 
     return false; 
    } 
    $(this).dialog("close"); 
} 
相關問題