[英]jQuery Confirm Dialog in ASP.NET Button OnClientClick
我在UpdatePanel的GridView中有一個TemplateField,帶有一個名為btnDelete
的按鈕。 我想使用jQuery Dialog,而不是標准的OnClientClick="return confirm('Are you sure?')"
。
到目前為止,我已經能夠使用btnDelete.Attributes["onclick"]
設置jQuery並在后面的代碼中設置jQuery Dialog代碼。 但是,在所有情況下,它都會發回到服務器,然后才有機會單擊“確認”或“取消”。
這是它產生的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("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
謝謝馬克
更新:
最終,我不得不使用UseSubmitBehavior =“ false”來獲取name =“”屬性進行渲染。 然后,我必須重寫OnClientClick,將值設置為“ return;”。 因此不會執行默認的__doPostBack()。 然后,我可以連接一個.live()單擊處理程序,該處理程序在Confirm上調用__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');
});
以示例的方式檢查所選問題的答案: 如何在Jquery UI對話框中實現“確認”對話框?
一些注意事項:
不要將onclick功能放在onclick屬性中。 jQuery的一大優點是它允許您執行不引人注目的Javascript。 相反,請執行以下操作:
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
另外,請確保您的對話框是在click事件之外實例化的,以便在第一次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');
});
});
那應該為您解決問題。
$(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" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.