1

我正在尝试将一些 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 事件之外的语法？

4

5 回答 5

8

所以你想在事件触发服务器之前捕获它，对吧？

首先，您需要取消 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
}

更新

添加：链接到完整的源

于 2009-02-11T14:17:06.683 回答
1

去除那个

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

后

$(document).ready(function() {

试试看。

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

于 2009-02-11T12:58:22.737 回答
1

我不知道 jquery 比你好多少，但我认为做你想做的事，你应该让取消会议按钮点击返回 false：

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

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

"Cancel This Event": function() { CallFunctionThatReallyCancelsTheEvent(); $(this).dialog("close");},
于 2009-02-11T13:28:30.140 回答
1

您不需要第一个 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 示例- 我使用普通按钮而不是 ASP.NET 按钮，因为我只是想获得正确的功能。

于 2009-02-11T14:12:51.327 回答
0

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

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

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

于 2009-02-11T14:26:17.830 回答