ASP.NET按鈕中的jQuery確認對話框OnClientClick

我在UpdatePanel的GridView中使用名爲btnDelete的按鈕來創建TemplateField。我想使用jQuery對話框而不是標準OnClientClick="return confirm('Are you sure?')"。ASP.NET按鈕中的jQuery確認對話框OnClientClick

到目前爲止，我可以使用btnDelete.Attributes["onclick"]設置jQuery，並在代碼隱藏中設置jQuery對話框代碼。但是，在我有機會單擊「確認」或「取消」之前，它會在所有情況下回傳給服務器。

這裏是它產生的HTML：

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
      $('#delete-transfer-confirm').dialog({ 
       buttons: { 
       'Confirm' : function() { $(this).dialog('close'); return true; }, 
       'Cancel' : function() { $(this).dialog('close'); return false; } 
       } 
      }); 

      $('p.message').text($(this).attr('rel')); 
      $('#delete-transfer-confirm').dialog('open'); 
      };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

我在做什麼錯誤導致了此功能，不要堵塞任一按鈕被點擊，直到？

相反，標準的確認工作得很好：

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert(&quot;Unexpected Error:\n\n&quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

謝謝，馬克

UPDATE：

最終，我不得不使用UseSubmitBehavior = 「假」來獲得name =「」屬性來渲染。然後我必須重寫OnClientClick，將該值設置爲「return」。所以默認的__doPostBack（）不會被執行。然後我能線了一個.live（）點擊處理程序，在確認調用__doPostBack（）：

$('input.delete').live('click', function(e) { 
     var btnDelete = $(this); 
     alert($(btnDelete).attr('name')); 
     e.preventDefault(); 


     $('#delete-transfer-confirm').dialog({ 
      buttons: { 
      'Confirm': function() { 
       $(this).dialog('close'); 
       __doPostBack($(btnDelete).attr('name'), ''); 

       return true; 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
       return false; 
      } 
      } 
     }); 

     $('p.message').text($(this).attr('rel')); 
     $('#delete-transfer-confirm').dialog('open'); 
     });

來源

2010-10-28 Mark Richman

而是在一個onClick函數來包裝一下你的代碼，做結合，通過獲取元素$（「ctl00_c1_gvTransfers_ctl02_btnDelete」）分開。的onClick（函數（）{YOUR CODE}）; – 2010-10-28 20:23:24

這裏有一個易於使用的插件：http://stackoverflow.com/questions/6457750/form-confirm-before-submit – 2012-09-27 11:29:00

檢查這個問題的一個例子，選擇的答案：How to implement "confirmation" dialog in Jquery UI dialog?

一對夫婦的備註：

不要將onclick功能放在onclick屬性中。 jQuery最大的好處之一就是它可以讓你做出不顯眼的Javascript。取而代之的是，做這樣的事情：

$(function() { 
    $('.delete').click(function(e) { 
     e.preventDefault() //this will stop the automatic form submission 
     //your functionality here 
    }); 
});

此外，請確保您的對話框實例的單擊事件之外，從而使第一click事件發生之前就被初始化。所以，這樣的事情會是你的結果：

$(function() { 
    $("#delete-transfer-confirm").dialog({ 
     autoOpen: false, 
     modal: true 
    }); 

    $('.delete').click(function(e) { 
     e.preventDefault(); 
     $('#delete-transfer-confirm').dialog({ 
      buttons: { 
       'Confirm': function() { 
        $(this).dialog('close'); 
        return true; 
       }, 
       'Cancel': function() { 
        $(this).dialog('close'); 
        return false; 
       } 
      } 
     }); 

     $('p.message').text($(this).attr('rel')); 
     $('#delete-transfer-confirm').dialog('open'); 
    }); 
});

這應該爲你做的伎倆。

來源

2010-10-28 20:15:36 Ender

或者將代碼包裝在document.ready（function（）{CODE;}）中 – 2010-10-28 20:24:33

$(document).ready(function() { 

     $('#btnCancel').click(function (e) { 
      e.preventDefault(); 

      $("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({ 
       modal: true, 
       draggable: false, 
       resizable: false, 
       width: 430, 
       height: 150, 
       buttons: { 
        "No": function() { 
         $(this).dialog("destroy"); 

        }, 
        "Yes": function() { 
         $("#btnCancel").unbind(); 
         $(this).dialog("destroy"); 
         document.getElementById('<%= btnCancel.ClientID %>').click(); 

        } 
       } 
      }); 
     }); 

    });

然後在頁面正文

<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right" 
        onclick="btnCancel_ClickEvent" clientidmode="Static" />

來源

2014-08-14 08:02:36 Anju313

ASP.NET按鈕中的jQuery確認對話框OnClientClick

回答

相關問題