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

Question

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

我做错了什么？

HTML：

<div id="modal_confirm_yes_no" title="Confirm"></div>

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 的方式设置函数，一切都会正常工作（感谢 Neal）。

Answer 3

你应该看到这个答案。

嗯，这可以工作。

你的对话框函数... showDialog()

function confirmation(question) {
    var defer = $.Deferred();
    $('<div></div>')
        .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() 函数。但是有丑陋的代码和漂亮的确认框外观:)

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

老实说，我为此花了很多时间，终于找到了最佳解决方案。您可以在此处查看更多详细信息=>Awesome Solution

Answer 4

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

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

  <a href="#" id="removeNode"><i class="fa fa-minus-circle fa-lg"></i></a>

以下是用户点击“删除节点”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();
                    }       
                }
        });