logo标签列表

使用JQuery UI对话框返回确认对话框的值

javascriptjqueryhtmljquery-ui
19
我正在使用 jQuery UI对话框 在按钮被点击时显示一个确认对话框。我希望当单击确定时返回true，否则返回false。
在onClick事件中关联对话框打开调用（如此处所述$dialog.dialog('open');）并不能达到目的。因此，作为一种解决方法，我遵循了这种方法，与此类似：http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery。这种方法和我的方法之间有两个不同点：
  1. 示例使用锚标签
  2. 它没有使用 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>

澄清：请注意，很容易（请参见bryan.taylor的 解决方案 ）进行表单提交。我想在这里做的是通过按钮点击来模拟提交，有点类似于JavaScript的confirm()方法。

理想情况下，这个例子应该在点击“确定”后跳转到Google并关闭，而在点击“取消”后不执行任何操作。我会尽量避免基于显式$(formName).submit()的解决方案。 - Nishant
可能是重复的问题：jquery ui对话框需要在用户按下按钮时返回值，但不起作用 - Liam
2个回答
49
8

您的代码有些复杂，我认为有更简单的方法来实现这个功能。您应该先实例化对话框，然后在按钮点击事件中打开它。代码看起来类似于这样：

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

我没有测试这段代码，只是为了让你知道如何解决这个问题而编写的，因此可能需要进行一些微小的调整。 - bryan.taylor
8
不，实际上 $myDialog.dialog('open'); 只是显示确认的 div 并返回 true。而 JavaScript 的 confirm 函数会等待用户响应并根据用户点击返回布尔值。您提供的解决方案将显示对话框并立即提交。这就是我使用更困难的方法捕获点击事件传播并使用 triggerHandler 重新启动事件的原因。 - Nishant
你成功地让它正常工作了吗？我有需要在返回 true 后运行的验证过程 - var where_to_coupon = confirm(pm_info_msg_013); 如果 (where_to_coupon== true) { doSubmit=true; return doSubmit; - Jason
4
这个被接受的解决方案是错误的。请看我的答案，其中包含正确的解决方案。 - Eric J.
@Nishant：既然这是你的问题，你不应该接受错误的解决方案。 - Eric J.
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接