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

我有一个jquery ui对话框我想用来提示用户确认删除。 当用户按“是”或“否”时，我需要返回“True”或“False”以继续执行一些javascript。 下面的代码的问题是当对话框显示它立即执行“return true;”时 但是用户还没按下“是”按钮呢？

我究竟做错了什么？

HTML：

Javascript电话：

 $("#modal_confirm_yes_no").html("Are you sure you want to delete this?"); var answer = $("#modal_confirm_yes_no").dialog("open"); if (answer) { //delete } else { //don't delete } 

Jquery对话框：

 $("#modal_confirm_yes_no").dialog({ bgiframe: true, autoOpen: false, minHeight: 200, width: 350, modal: true, closeOnEscape: false, draggable: false, resizable: false, buttons: { 'Yes': function(){ $(this).dialog('close'); return true; }, 'No': function(){ $(this).dialog('close'); return false; } } }); 

Answer 1

javascript是异步的。

所以你必须使用回调：

  $("#modal_confirm_yes_no").dialog({ bgiframe: true, autoOpen: false, minHeight: 200, width: 350, modal: true, closeOnEscape: false, draggable: false, resizable: false, buttons: { 'Yes': function(){ $(this).dialog('close'); callback(true); }, 'No': function(){ $(this).dialog('close'); callback(false); } } }); function callback(value){ //do something } 

Answer 2

如果有人需要异步行为的图形演示，这里可能会有所帮助。 在函数中包装Ronedog的对话框。 我在下面使用过“showConfirm”。 捕获变量中的返回值。 在某个按钮单击事件中调用它，并尝试提醒按下了哪个按钮：

 $('.btn').on('click', function(event) { var cVal = showConfirm('Really?'); alert('User pressed ' + cVal); }); 

在您有机会按下按钮之前，您会发现始终会收到警报。 由于javascript是异步的，因此alert函数不必等待showConfirm函数的结果。

如果你设置了Neal的function，一切都会起作用（感谢Neal）。

Answer 3

你应该看到这个答案。

嗯，这可以工作。

你的对话function…… showDialog（）

 function confirmation(question) { var defer = $.Deferred(); $('
') .html(question) .dialog({ autoOpen: true, modal: true, title: 'Confirmation', buttons: { "Yes": function () { $(this).dialog("close"); defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. }, "No": function () { $(this).dialog("close"); defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. } }, close: function () { $(this).remove(); } }); return defer.promise(); } 

然后是你使用该函数的代码……

 function onclick(){ var question = "Do you want to start a war?"; confirmation(question).then(function (answer) { if(answer=="true"){ alert("this is obviously " + ansbool);//TRUE } else { alert("and then there is " + ansbool);//FALSE } }); } 

对大多数人来说，这似乎是错误的。 但总有一些情况下你不能没有从JQuery Dialog返回。

这基本上会模仿confirm（）函数。 但丑陋的代码和一个很好的确认框看:)

我希望这可以帮助一些人。

老实说，我花了很多时间，最后我找到了最佳解决方案。你可以在这里看到更多细节=> 很棒的解决方案

Answer 4

您需要使用回调函数。 这是工作示例：

以下是fa-icon。 当用户点击它时，它会调用javascript。

以下是用户单击“删除节点”fa图标时执行的javascript代码。

 $("a#removeNode").click(function(){ // returns the attribute of "selected" Table Row either it is expanded or collapsed based on it's class var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); //alert($("tr.expanded.selected").attr("data-tt-id")); if(typeof datattid != 'undefined'){ //alert(datattid); displayConfirmDialog("You are trying to remove selected node : " + datattid + ". Are you sure?", proceedToRemoveNode); }else { showErrorDialog("Invalid Row Selection", "Node is not selected.\n You must select the node to remove it." ); // displayMessage ("#dialog-message", "Invalid Row Selection", "ui-icon-heart", "Node is not selected.\n You must select the node to remove it." ); } }); 

displayConfirmDialog显示确认消息，并根据使用操作调用回调函数。 这是displayConfirmDialog的代码。

 //Confirmation dialog to remove node function displayConfirmDialog(message, proceedWithRequest) { var retVal; $("div#dialog-confirm").find("p").html(message); var confirmDlg = $( "#dialog-confirm" ).dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "Remove Node": function() { this.retVal = true; proceedWithRequest() $( this ).dialog( "close" ); }, Cancel: function() { this.retVal = false; $( this ).dialog( "close" ); } }, show:{effect:'scale', duration: 700}, hide:{effect:'explode', duration: 700} }); confirmDlg.dialog("open"); } 

以下是回调函数：

 //Callback function called if user confirms to remove node. function proceedToRemoveNode() { var datattid = $("tr.expanded.selected, tr.collapsed.selected").attr("data-tt-id"); $("#nh_table").treetable("removeNode", datattid); showErrorDialog("Node removed successfully", "The node " + datattid + " is removed successfully" ); // alert("The node " + datattid + " is removed successfully"); } 

以下是使用JQuery从TreeTable中删除节点的工作应用程序的图像。

确认后，从树中删除节点“qa-2”，如下图所示。

Answer 5

 function confirm() { $("#dialog-message").dialog({ modal : true, buttons: { "Yes" : function() { $(this).dialog("close"); document.forms[0].action = "actionname-yes"; document.forms[0].submit(); }, "No" : function() { $(this).dialog("close"); document.forms[0].action = "actionname-no"; document.forms[0].submit(); } } });