使用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對話框從確認對話框中返回值

回答

相關問題