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

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

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()方法。

来源

2010-08-24 Nishant

理想的情况下，这个例子应该带你到谷歌确定关闭并做取消什么。我会尽量避免显式$（formName）.submit（）的解决方案。 – Nishant 2010-08-24 21:02:56

可能重复[jquery ui对话框需要返回值，当用户按下按钮，但不工作]（http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return-价值当用户按下按钮但不是沃尔） – Liam 2013-08-20 13:28:22

JavaScript是异步的。拨打

$myDialog.dialog('open');

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

取而代之，您必须使用您在buttonsoption of dialog中提供的事件回调。

这种近乎重复的一个很好的例子：

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

来源

2012-04-06 04:18:45

http://stackoverflow.com/a/18474005/1876355 – Pierre 2013-08-27 19:46:06

你的代码有点复杂，我认为有一个更简单的方法来做到这一点。您应该首先实例化对话框，然后在您的按钮的单击事件中打开它。代码将类似于此：

<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的对话框API文档，所以你可以看到所有的选项：

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

来源

2010-08-24 21:22:22

PS我没有测试这个代码，只是写了很多，所以你可以有一个如何解决这个问题的想法，所以可能会有一些小的调整需要。 – 2010-08-24 21:26:08

是的，这段代码没问题。唯一的是我想提交一个表单..所以我要做的是把$（'＃formId'）。submit（）inplace of window.open（'http://google.com/'）;在你的答案中。但问题是我想通过按钮点击模拟提交。我意识到或许这个问题并不清楚，我在这个问题上加了一些澄清。感谢您的建议。 – Nishant 2010-08-24 23:09:37

@Nishant：不太确定'按钮点击模拟提交'是什么意思。你的意思是说，当有人点击确定时，你想停止提交事件吗？我想我只是要求你详细说明'模拟提交'是什么意思，你能提供一个相关的用例吗？ – 2010-08-24 23:15:17

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

回答

相关问题