使用 JQuery UI 对话框从确认对话框返回值 [英] Returning value from confirmation dialog using JQuery UI dialog

查看：23
本文介绍了使用 JQuery UI 对话框从确认对话框返回值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 jQuery UI 对话框 在单击按钮时显示确认对话框.我想返回 true，当点击 OK 时返回 false 否则.

在 onClick 中关联对话框打开调用(如给定 here, $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"><头><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>控制面板</title><身体><form action="http://google.com"><button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">开始热核战争</span></表单><div title="为什么这么认真?"id="id3" style="display:none;"><p>你要发动战争了.<p>单击确定"进行确认.单击取消以取消此操作.</p>

<script type="text/javascript">$('#id2').click(function (event) {如果 ($(this).data('propagationStopped')) {//警报('真');$(this).data('propagationStopped', false);返回真；} 别的 {event.stopImmediatePropagation();$('#id3').对话框({//自动打开:假，宽度:600，纽扣: {好的":函数(){$(this).dialog("close");$('#id2').data('propagationStopped', true);$('#id2').triggerHandler(event);},取消":函数(){$(this).dialog("close");返回假；}}});//警报('假');返回假；}});

<小时>

澄清:请注意它非常简单(参见bryan.taylor 的解决方案) 进行表单提交.我在这里要做的是通过单击按钮来模拟提交.更像是 JavaScript 的 confirm() 方法.

解决方案

JavaScript 是异步的.调用

$myDialog.dialog('open');

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

相反，必须使用您在 buttons 中提供的事件回调 对话框选项.

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

jquery ui 对话框需要返回值，当用户按下按钮，但不工作

I am using jQuery UI dialog to display a confirmation dialog when a button is clicked. I want to return true, when OK is clicked and false otherwise.

Associating dialog open call in onClick (as given here, $dialog.dialog('open');) event does not serve the purpose. So, as a workaround, I followed an approach, which is similar to this: http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery. There are two differences between this approach and mine:

  1. The example uses anchor tag and,
  2. It does not use jQuery UI dialog.

I have modified the code given in the example link, but it does not work. I wonder what I am doing wrong. Is there any cheaper way to do this?

Here is the code, all the CSS/JS are referencing to jQuery CDN, so you should be able to copy the code to see the behavior.

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

Clarification: Please note that it's very simple (see the solution by bryan.taylor) to do a form submission. What I want to do here is to simulate submission by button click. More like JavaScript's confirm() method.

解决方案

JavaScript is asynchronous. The call to 

$myDialog.dialog('open');

will not block, but rather will return immediately.

Instead, one must use event callbacks that you provide in the buttons option of dialog.

This near-duplicate provides a good example:

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

这篇关于使用 JQuery UI 对话框从确认对话框返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆