JQuery UI dialog with boolean return - true or false

Question

I am trying to replace javascript confirm (). I found a jquery dialog () function that can be fully customized. The problem is that I cannot make it return true or false.

Here is my code:

$('#delBox').dialog( { autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro', buttons: { "Ok": function () { return true; }, "Cancelar": function () { $(this).dialog("close"); return false; } }, open: function () { var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')"); buttonsSet.attr("class", "ui-button ui-state-default"); $('.ui-dialog-titlebar-close span').empty(); $('.ui-dialog-buttonset').find("button:contains('Ok')").button({ text: false, icons: { primary: 'ui-icon-ok' } }); $('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({ text: false, icons: { primary: 'ui-icon-cancel' } }); } }); 

This returns the object only until any option is selected:

 function deletar() { alert($('#delBox').dialog('open')); } 

Answer 1

Dialog boxes

jQueryUI cannot return true or false since they are displayed on top of other content but do not block execution.

The best you can do is:

• make the modal field so that it hides other content

• to use callbacks depending on which option is selected.

For extra bonus points, you can create a $.Deferred() promise object and return it when a dialog is displayed. You can then resolve or reject , which promise in button event handlers.

This will give you a clear separation between displaying the dialog box and following these steps:

 function showDialog() { var def = $.Deferred(); // create and/or show the dialog box here // but in "OK" do 'def.resolve()' // and in "cancel" do 'def.reject()' return def.promise(); } showDialog().done(function() { // they pressed OK }).fail(function() { // the pressed Cancel }); // NB: execution will continue here immediately - you shouldn't do // anything else now - any subsequent operations need to be // started in the above callbacks. 

Answer 2

The first answer is fine - I thought I’ll just add some code showing how you can return the button that the button was clicked on:

 function ShowYesNoMessage(title, message) { var def = $.Deferred(); $("#infoMessage").html(message); $("#dialog_infoMessage").dialog({ modal: true, title: title, buttons: { Yes: function () { $("#infoMessage").html(""); $(this).dialog("close"); def.resolve("Yes"); }, No: function () { $("#infoMessage").html(""); $(this).dialog("close"); def.resolve("No"); } } }); return def.promise(); } $.when(ShowYesNoMessage("Are you sure", message)).then( function(status) { if (status == "Yes") { //do the next step } } );