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

点击会生成客户端事件，并且只有选择“确定”时，页面才会强制重新加载。谁能给出将这个 queryUI 对话框从 OnClientClick 事件中挂起的语法？

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 执行回发 - 您可以找到将 Button 更改为 LinkBut​​ton 和鼠标的正确代码在它上面。

改变：

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

到：

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

这将与 btnDeleteEvent 执行相同的操作，您确实需要拥有一个名为此名称的 LinkBut​​ton 来实际执行点击行为（使 text = "" 因此它不会显示在页）。

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

记得在代码隐藏文件中包含要触发的事件

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

更新

添加：link to the complete source

Answer 2

我不比你更了解 jquery，但我认为要做你想做的事，你应该让取消会议按钮点击返回 false：

$('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); return false; });

然后使“取消此事件”按钮向服务器发起取消：

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

Answer 3

删除

$('#CancelDialog').dialog();  

之后

$(document).ready(function() {  

然后试试看。

拿 2。 提交的“按钮”的默认行为可能是导致它重新加载页面的原因。您可以尝试将 type='button' 添加到按钮，这样它就不会默认提交吗？

Answer 4

您不需要第一个 JavaScript，因为无论如何它都会由第二个完成（我怀疑争夺系统导致关闭）。您的第二段 JavaScript 应该位于页眉的脚本块中，并且应该如下所示。

<script>
  $(document).ready(function() {
  $("#btnCancelMeeting").click(function() {
      $("#CancelDialog").dialog({ 
          autoOpen: true,
          width: 500,
          buttons: {
          "Cancel This Event": function() { $(this).dialog("close"); },
          "Do Not Cancel": function() { $(this).dialog("close"); }
            } 
            });
      });
  });
</script>

我有点担心 ASP.NET 按钮上的事实，因为我怀疑它会执行回发（除非您已将其关闭 - 如果内存服务有一个属性可以控制该按钮），而且它也是可能会导致问题。

工作版本可在以下位置获得：test.html sample - 我使用普通按钮而不是 ASP.NET 按钮，因为我只是想获得正确的功能。

Answer 5

我不熟悉其中的服务器端 .NET 部分，但如果此问题发生在常规 jQuery 客户端设置中，则需要将其添加到点击处理函数中：

function(event){
  event.preventDefault();
  event.stopPropagation();
  $(this).dialog("open");
}

编辑：对不起，这将是对话框打开调用，而不是关闭处理程序。