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

I'v got a jquery ui dialog box I want to use to prompt the user to confirm a deletion. When the user presses "yes" or "no" I need to return "True" or "False" to continue some javascript execution. The problem with the code below is when the dialog box shows up it immediately is executing a "return true;" but the user hasn't pressed the "Yes" button yet?

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

What am I doing wrong?

我究竟做错了什么？

HTML:

HTML：

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

Javascript call:

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 dialog:

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

5 个解决方案

#1

javascript is asynchronous.

javascript是异步的。

so you have to use callbacks:

所以你必须使用回调：

   $("#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
    }

#2

If anyone needs a graphic demonstration of asynchronous behavior, here's one that might be helpful. Wrap Ronedog's dialog in a function. I've used "showConfirm" below. Capture the return value in a variable. Call it in some button click event, and try to alert what button was pressed:

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

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

You will find that you always get the alert before you have a chance to press the button. Since javascript is asynchronous, the alert function doesn't have to wait for the result of the showConfirm function.

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

If you then set up the function Neal's way everything will work (thanks Neal).

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

#3

U should see this answer.

你应该看到这个答案。

Well, This can work.

嗯，这可以工作。

Your dialog function... showDialog()

你的对话功能...... 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();
}

and then the code where you use the function...

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

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

This may seem wrong for most people. But there is always some situations where you just can't go without return from JQuery Dialog.

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

This will basically mimic the confirm() function. But with ugly code and a nice confirm box look :)

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

I hope this helps some people out.

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

Honestly,I was take many time for this, finally i found best solution.you can see more detail here=>Awesome Solution

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

#4

You need to use callback functions. Here is the working example:

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

Following is the fa-icon. When user clicks it it calls javascript.

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

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

Following is the javascript code executed when user click "Remove Node" fa icon.

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

The displayConfirmDialog displays the confirmation message and based on use action it calls the callback function. Here is the code of displayConfirmDialog.

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

Following is the callback function:

以下是回调函数：

//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");
}

Following is images of working application that deletes node from a TreeTable using JQuery.

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

After confirmation the node "qa-2" is removed from the Tree as shown in following image.

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

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