jquery UI - 简单的例子,我做错了什么？

Question

我试图将一些jquery UI代码放入现有的asp.net应用程序中,并且可以使用帮助...

我有一个按钮,当用户点击它时,我想用两个go/nogo确认按钮弹出一个jquery UI对话框.

这工作除了,当我点击按钮,它打开,然后立即关闭...作为一个新的jquery用户,我相信我只是缺少一些简单的...

这是打开对话框的javascript:

<script type="text/javascript" >

    $(function() {
    // Cancel Event Dialog Box
    $('#CancelDialog').dialog({
        autoOpen: false,
        width: 500,
        buttons: {
            "Cancel This Event": function() {$(this).dialog("close");}, 
            "Do Not Cancel": function() {$(this).dialog("close");} 
        }
    });

});
</script>

这是调用它的代码:

<asp:Button id="btnCancelMeeting" Text="Cancel Event" runat="server" />
 <script language="javascript" type="text/javascript">  
    $(document).ready(function() {  
    $('#CancelDialog').dialog();  
    $('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); });  
         });  
</script>

<div id="CancelDialog" title="Cancel and Event or Meeting"><p>Cancel this event.</p></div>   

回顾一下:我点击按钮,我得到了带有两个按钮和我想要的消息的对话框,但它在1秒后自行关闭......我做错了什么？

编辑:好的,现在我想我看到发生了什么......当我点击按钮时,对话框会根据需要弹出,但页面再次从服务器重新加载...这会重置整个页面,包括清除对话.

所以我真正想要发生的是模仿这种行为:

<asp:Button id="btnDelete" Text="Delete Event" runat="server" OnClientClick='javascript:return confirm(&quot;Are you sure you would like to permanently delete this event/meeting? This action cannot be undone.&quot;)' OnClick="btnDelete_Click" />

click发生客户端事件,只有选择"OK",页面才会强制重新加载.任何人都可以提供从OnClientClick事件中挂起此queryUI对话框的语法吗？

Answer 1

所以你想在触发服务器之前捕获事件,对吗？

首先,您需要取消Click事件,仅将该按钮用作普通按钮,将当前按钮更改为:

<asp:Button id="btnShowDialog" Text="Delete Event" runat="server" OnClientClick="$('#myDialog').dialog('open');" />

或者为此您可以使用普通链接或html按钮,而不是使用服务器来创建它

<input type="button" value"Delete Event" onclick="$('#myDialog').dialog('open');" />

这将打开对话框:

现在,您需要的是在自动对话框中放置触发服务器事件的Button!

您可以完成传递保存javascript,您可以在单击按钮时找到浏览器状态栏,换句话说,只使用javascript进行回发 - 您可以找到正确的代码更改按钮到LinkBut​​ton并将鼠标悬停在它上面.

改变:

 "Cancel This Event": function() {$(this).dialog("close");} 

至:

"Cancel This Event": function() {
    __doPostBack('btnDeleteEvent', '');
} 

这将与btnDeleteEvent一样,你需要有一个名为LinkBut​​ton的名称来实际执行点击行为(make text =""所以它不会显示在页面中).

<asp:LinkButton ID="btnDeleteEvent" runat="server" Text="" onclick="btnDeleteEvent_Click" />

记得在代码隐藏文件中有要启动的事件

protected void btnDeleteEvent_Click(object sender, EventArgs e)
{
    // do something
}

更新

添加:链接到完整的源