jQuery的确认对话框中的ASP.NET按钮的OnClientClick
题
我有一个GridView与按钮称为btnDelete
一个TemplateField在一个UpdatePanel。而不是标准的OnClientClick="return confirm('Are you sure?')"
我想使用jQuery对话框。
到目前为止,我可以在使用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("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
谢谢, 标记
<强>更新强>
最后,我不得不使用UseSubmitBehavior =“假”来获得NAME =“”属性来呈现。然后,我不得不重写的OnClientClick,其值设置为“回报”;所以默认__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');
});
解决方案
检查所选答案为这个问题中的示例:如何实现在jQuery用户界面对话框中的“确认”对话框?
有两点要注意:
不要把你的onclick功能在onclick属性。一个jQuery的最大的好处是,它可以让你做非侵入式JavaScript。取而代之的是,做这样的事情:
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
此外,请确保您的对话框单击事件外实例化,让第一次点击事件发生前,它被初始化。所以,这样的事情将是你的结果是:
$(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" />
不隶属于 StackOverflow