Hộp thoại xác nhận jQuery trong nút ASP.NET OnClientClick

Question

Tôi có một TemplateField trong một GridView trong một UpdatePanel với một nút gọi là btnDelete. Thay vì tiêu chuẩn OnClientClick="return confirm('Are you sure?')" Tôi muốn sử dụng Hộp thoại jQuery.

Cho đến giờ, tôi có thể đặt jQuery bằng cách sử dụng btnDelete.Attributes["onclick"] và đặt mã hộp thoại jQuery trong mã sau. Tuy nhiên, nó đăng lại máy chủ trong mọi trường hợp trước khi tôi có cơ hội nhấp vào "Xác nhận" hoặc "Hủy".

Dưới đây là HTML nó tạo ra:

<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"> 

Tôi đang làm gì sai đó gây ra chức năng này không để chặn cho đến khi một trong hai nút được nhấp?

Ngược lại, xác nhận tiêu chuẩn làm việc tốt:

<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"> 

Cảm ơn, Đánh dấu

UPDATE:

Cuối cùng, tôi đã phải sử dụng UseSubmitBehavior = "false" để có được những thuộc tính name = "" để hiển thị. Sau đó, tôi đã phải ghi đè lên các OnClientClick, thiết lập giá trị để "trở lại;" do đó, mặc định __doPostBack() không được thực hiện. Sau đó, tôi đã có thể để dây lên một .live() bấm điều khiển, mà gọi các __doPostBack() trên Confirm:

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

Answer 1

Kiểm tra câu trả lời được lựa chọn cho câu hỏi này cho một ví dụ: How to implement "confirmation" dialog in Jquery UI dialog?

Một vài ghi chú:

Không đặt chức năng onclick của bạn trong thuộc tính onclick. Một trong những lợi ích tuyệt vời của jQuery là nó cho phép bạn thực hiện Javascript không phô trương. Thay vào đó, hãy làm như sau:

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

Ngoài ra, hãy đảm bảo rằng hộp thoại của bạn được khởi tạo bên ngoài sự kiện nhấp chuột, để nó được khởi chạy trước khi sự kiện nhấp chuột đầu tiên diễn ra. Vì vậy, một cái gì đó như thế này sẽ là kết quả của bạn:

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

Điều đó sẽ làm điều đó cho bạn.

Answer 2

$(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(); 

        } 
       } 
      }); 
     }); 

    }); 

Sau đó, trong trang Body

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