Jquery dialog box return value

Question

You can find a solution about this in many posts ( Post 1 , Post2 ), but their solution does not work for me.

Here is the regular jquery dialog box written by me.

$("#dialog").dialog({ autoOpen:false, buttons:{ "ok":function(){ $(this).dialog("close"); return true; }, "cancel":function(){ $(this).dialog("close"); return false; } } }); 

I will open a dialog box with the code:

 var returnVal=$("#dialog").dialog("open"); 

I need to return false if the user clicks “cancel” and returns true if the user clicks “ok”.

 var returnVal=$("#dialog").dialog("open"); 

I need returnVal to return boolean value (true / false), but it returns a javascript object .

Answer 1

You cannot return any of the OK / undo functions, since they are event handlers that are processed with just the click of a button.

Use a separate function to process the result:

 $mydialog = $("#dialog").dialog({ autoOpen: false, buttons: { "ok": function() { $(this).dialog("close"); processResult(true); }, "cancel": function() { $(this).dialog("close"); processResult(false); } } }); $mydialog.dialog("open"); function processResult(result) { alert(result); } 

Working example: http://jsfiddle.net/nz2dH/

Answer 2

I have a Yes / No dialog box with a custom message and a callback function like this. This is useful if you want to use the same dialog for various purposes.

 <script type="text/javascript"> // prepare dialog $(function () { $("#confirm-message-dialog").dialog({ autoOpen: false, modal: true, closeOnEscape: false, buttons: { Yes: function () { $(this).dialog("close"); $(this).data("callback")(true); }, No: function () { $(this).dialog("close"); $(this).data("callback")(false); } } }); }); // open dialog with message and callback function function confirmMessageDialog (message, callback) { $('#confirm-message-dialog-message').text(message); $('#confirm-message-dialog').data("callback", callback).dialog("open"); }; </script> <!-- The dialog content --> <div id="confirm-message-dialog" title="Warning"> <p id="confirm-message-dialog-message"></p> </div> 

Hope this helps others too :)