Question

我有一个jquery ui对话框我想用来提示用户确认删除。当用户按下“是”或“否”时，我需要返回“True”或“False”以继续执行一些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（）函数。但是使用丑陋的代码和一个很好的确认框看起来：）

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

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

Answer 4

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

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

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

以下是用户点击＆＃34;删除节点＆＃34;时执行的javascript代码fa图标。

$("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中删除节点的工作应用程序的图像。

确认后节点＆＃34; qa-2＆＃34;从树中删除，如下图所示。

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();
                    }       
                }
        });

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

5 个答案: