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秒后自行关闭......我做错了什么？

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

所以我真正想要的是模仿这种行为：

<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”时，页面才会强制重新加载。任何人都可以提供将此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进行回发 - 您可以找到正确的代码更改按钮到LinkButton和鼠标在它上面。

更改：

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

为：

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

这将与btnDeleteEvent一样，你需要让一个名为LinkButton的名称实际执行点击行为（make 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

删除

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

之后

$(document).ready(function() {

并试试。

拿2。提交“按钮”的默认行为可能是重新加载页面的警告。你可以尝试在按钮上添加type ='button'，这样就不会默认提交吗？

Answer 3

我不知道jquery比你做得好多了，但是我想你应该做你想要的取消会议按钮点击return false：

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

然后使用“取消此事件”按钮启动服务器的取消：

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

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");
}

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

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

5 个答案: