Getting a Value Back from a jQuery Dialog

There’s many ways to do so. You can use the close event and pickup values passed through the .data() method on the dialog, you can use a variable in the window context, but these are all very lacking in structure, however –All jQuery UI elements allow you to pass any value you want in while constructing t [code]yourSelector.dialog({ width: 500, height: 500, title: “Sample”, success: function(response) { console.log(response); } // <– this is non-standard }); [/code] Inside of our dialog, we can now access this success call back by doing yourSelector.dialog(“option”, “success”); Lets give a real world example. This dialog runs the success function passed as an argument when one of the buttons is clicked. This function displays our dialog: [code] function show(success, dialog) { var results = { foo: 5 }; return $.dialog(“/Shared/LocationPicker/LocationPickerForRequestor”, $.extend({}, $.isPlainObject(dialog) ? dialog : {}, { width: 600, height: 600, modal: true, title: “Select Location”, success: success })); } [/code] Now for some of the code inside of the dialog’s ready event. [code] var dialog = $target.closest(“:ui-dialog”).dialog(“option”, “buttons”, { “Choose Highlighted Location”: function() { var success = dialog.dialog(“option”, “success”); if ($.isFunction(success)) success(locationPicker.getOutcome()); $(this).closeDialog(); }, Cancel: function() { $(this).closeDialog(); } }); [/code] As is relatively clear in the code, only when the “Choose Highlighted Location” button is clicked is the function we passed into the dialog’s options object called. Keep in mind, this function could be called in response to any event you want, not only a button click!

Leave a Reply

Your email address will not be published. Required fields are marked *

America's Best Software Engineers, On-Demand, at an Affordable Price
Surge Forward With Us