Reputation: 1140
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
Reputation: 27022
jQuery dialogs do not block execution like the built in javascript confirm()
function. I can suggest two possible solutions:
confirmDialog
function.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
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.
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"); }
}
}
$("#confirmDialog").on({
"ok":function(event,ui){
//save work
},
"cancel":function(event,ui){
// cancel work
}
},null,null);
Upvotes: 1