使用 JQuery UI 对话框从确认对话框返回值答案

【问题标题】：Returning value from confirmation dialog using JQuery UI dialog使用 JQuery UI 对话框从确认对话框返回值
【发布时间】：2011-04-03 10:00:55
【问题描述】：

我使用jQuery UI dialog 在单击按钮时显示确认对话框。我想在点击确定时返回true，否则返回false。

在onClick（如给定here，$dialog.dialog('open');）事件中关联对话框打开调用不起作用。因此，作为一种解决方法，我采用了一种类似于此的方法：http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery。这种方法和我的方法有两个不同：

该示例使用锚标记，
它不使用 jQuery UI 对话框。

我已经修改了示例链接中给出的代码，但它不起作用。我想知道我做错了什么。有没有更便宜的方法来做到这一点？

这里是代码，所有的CSS/JS都引用了jQuery CDN，所以你应该可以复制代码来看看行为。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Control Panel</title>
  </head>

  <body>
    <form action="http://google.com">
      <button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span>
      </button>
    </form>
    <div title="Why so serious?" id="id3" style="display:none;">
      <p>You are about to start a war.
        <p>Click OK to confirm. Click Cancel to cancel this action.</p>
    </div>
  </body>
  <script type="text/javascript">
    $('#id2').click(function (event) {

      if ($(this).data('propagationStopped')) {
        //alert('true');
        $(this).data('propagationStopped', false);
        return true;
      } else {

        event.stopImmediatePropagation();

        $('#id3').dialog({
          //autoOpen: false,
          width: 600,
          buttons: {
            "Ok": function () {
              $(this).dialog("close");
              $('#id2').data('propagationStopped', true);
              $('#id2').triggerHandler(event);
            },
            "Cancel": function () {
              $(this).dialog("close");
              return false;
            }
          }
        });
        //alert('false');
        return false;
      }
    });
  </script>

</html>

澄清：请注意，提交表单非常简单（参见solution by bryan.taylor）。我在这里要做的是通过单击按钮来模拟提交。更像是 JavaScript 的 confirm() 方法。

【问题讨论】：

理想情况下，此示例应将您带到 Google 上 OK 并关闭，而在 Cancel 上不执行任何操作。我会尽量避免明确的基于 $(formName).submit() 的解决方案。
jquery ui dialog box need to return value, when user presses button, but not working的可能重复

标签： javascript jquery html jquery-ui

【解决方案1】：

JavaScript 是异步的。对

的调用

$myDialog.dialog('open');

不会阻塞，而是会立即返回。

相反，必须使用您在buttons option of dialog 中提供的事件回调。

这个近乎重复的例子提供了一个很好的例子：

jquery ui dialog box need to return value, when user presses button, but not working

【讨论】：

【解决方案2】：

您的代码有点复杂，我认为有一种更简单的方法可以做到这一点。您应该首先实例化对话框，然后在按钮的单击事件中打开它。代码如下所示：

<script>
$(document).ready(function () {
  var $myDialog = $('<div></div>')
    .html('You are about to start a war.<br/>Click OK to confirm.  Click Cancel to stop this action.')
    .dialog({
    autoOpen: false,
    title: 'Why so serious?',
    buttons: {
      "OK": function () {
        $(this).dialog("close");
        window.open('http://google.com/');
        return true;
      },
      "Cancel": function () {
        $(this).dialog("close");
        return false;
      }
    }
  });

  $('#myOpener').click(function () {
    return $myDialog.dialog('open'); //replace the div id with the id of the button/form
  });
});
</script>

<div id="myOpener"></div>

这里是 jQuery UI Dialog API 文档，因此您可以查看所有选项：

http://api.jqueryui.com/dialog/

【讨论】：

PS 我没有测试这段代码，只是写了很多，所以你可以知道如何解决这个问题，所以可能需要一些小的调整。
是的，这段代码没问题。唯一的事情是我想提交一个表单..所以我要做的就是把 $('#formId').submit() 代替 window.open('google.com/');在你的回答中。但问题是我想通过单击按钮来模拟提交。我意识到这个问题可能不清楚，我在问题中添加了澄清。感谢您的建议。
@Nishant：不太确定“通过按钮单击模拟提交”是什么意思。你的意思是当有人点击确定时你想阻止提交事件的发生？我想我只是要求您详细说明“模拟提交”是什么意思，您能提供一个相关的用例吗？
不，实际上。 $myDialog.dialog('open');只显示确认 div 并返回 true。而 JavaScript 确认函数等待用户的响应并根据用户单击的内容返回布尔值。您的解决方案将显示一个对话框并立即提交。这就是原因，我经历了捕获点击事件传播然后使用 triggerHandler 重新启动事件的更艰难的路线。
这个被接受的解决方案是错误的。请参阅我的答案以获得正确的解决方案。