CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jose
Jose

Reputation: 1140

Variable value not updating inside dialog

I have the following simple dialog: 

function confirmDialog(message, title) {


var returnvalue;

if ($("#confirmDialog").length == 0)
    $('body').append('<div id="confirmDialog"></div>');

var dlg = $("#confirmDialog")
    .html(message)
    .dialog({
        autoOpen: false,
        minHeight: 50,
        title: title,
        show: {
            effect: "explode",
            duration: 250
        },
        hide: {
            effect: "explode",
            duration: 250
        },

        buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { returnvalue = true; $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { returnvalue = false; $("#confirmDialog").dialog("close"); }
            }
        },
        modal: true
    });
$('#confirmDialog').dialog("open");
return returnvalue;
}

very simple implementation. My problem is that when I run through the script, at the end, when it returns the variable returnvalue is undefined, meaning, it did not set it to either true or false depending on which button was clicked.

I have tried setting it to var returnvalue = false; but it never gets a different value no matter which button I click.

Any help is appreciated!! Thank you!

EDIT:

I believe I noticed why the variable doesn't get set. I am calling this dialog from the click event from another dialog, after the user clicks on the "Save" button of the parent dialog, this one pops up. Now, since it is contained in a function, it does not wait for my input, meaning, it doesn't "see" that I clicked either "OK" or "Cancel". How can I fix this?

Upvotes: 1

Views: 144

Answers (2)

Jason P
Jason P

Reputation: 27022

jQuery dialogs do not block execution like the built in javascript confirm() function. I can suggest two possible solutions:

  1. Pass "ok" and "cancel" callbacks into your confirmDialog function.
  2. Have your confirmDialog function return a promise object that you resolve after a button is clicked and have the calling function wait for that to resolve.

I prefer option 2.

Upvotes: 2

DefyGravity
DefyGravity

Reputation: 6031

I would have the button clicks trigger an event before they close the dialog, then I would listen for that event to happen in the parent process.

  • parent dialog opens
  • user clicks save
  • opens confirmation dialog
  • user closes confirmation dialog
  • confirmation dialog triggers "ok" or "canceled" event depending
  • parent dialog is listening for "ok" or "canceled" event
  • parent dialog reacts accordingly

confirmation dialog buttons

buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { $(this).trigger("ok"); $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { $(this).trigger("cancel"); $("#confirmDialog").dialog("close"); }
            }
        }

parent dialog, or document.ready()

$("#confirmDialog").on({
    "ok":function(event,ui){ 
      //save work
    },
    "cancel":function(event,ui){
      // cancel work
     }
    },null,null);

Upvotes: 1

Related Questions