jquery ui dialog box need to return value, when user presses button, but not working

Question

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?

What am I doing wrong?

HTML:

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

Javascript call:

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

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

It looks like you are missing a quote in your first block of code. I don't know if that will fix your issue but if you copy and pasted your current code, that is going to cause problems. — Mertis, May 18 '11 at 19:01

score 38 · Accepted Answer · answered May 18 '11 at 19:00

38

javascript is asynchronous.

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
    }

answered May 18 '11 at 19:00

Naftali

144,921
39
244
303

I'm having some issues with replicating this -- for instance, I want to utilize this function later, depending on which button the user clicks. Do I just add 'callback(true)' and 'callback(false' to the buttons and place the function inside of the function I want to call? I'm a newbie when it comes to callbacks! – streetlight Oct 16 '12 at 12:06
I need it to return true or false because so I can prevent a tab switch in jquery UI tabs using the select: option... this callback option isn't going to work for me unfortunately. Any ideas? – ladieu Nov 08 '12 at 17:12
Another Solution if you want return in a way: http://stackoverflow.com/a/18474005/1876355 – Pierre Aug 27 '13 at 19:55

score 2 · Answer 2 · edited May 23 '17 at 12:26

U should see this answer.

Well, This can work.

Your dialog function... 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.

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

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

score 1 · Answer 3 · answered Aug 30 '13 at 16:03

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:

$('.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.

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

score 0 · Answer 4 · answered Jun 10 '17 at 14:57

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

Following is the fa-icon. When user clicks it it calls 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.

$("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.

//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.

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

score -1 · Answer 5 · edited Mar 13 '15 at 23:49

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

Welcome to SO. You are answering with a code only answer on a question that's over 4 years old with an answer accepted with over 30 votes. Additionally this doesn't answer why OP has the issue he/she is experiencing. — JNYRanger, Mar 13 '15 at 23:14

jquery ui dialog box need to return value, when user presses button, but not working

5 Answers5

Linked