Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
// A RequireJS module that wraps the jQuery UI Dialog in a jQuery.Deferred
// Advantages:
// Reuses a single DOM element for all the dialogs
// Keeps the dialog out of the DOM when it is not in use
// A much more elegant interface for using custom modals and working with the user's resolution
define("bocoup.confirm",["jquery.ui.widget"],function(factory,position,dialog) {
var d = $("<div>"),
defaults = {
function confirmation(question,options) {
options = $.extend({},defaults,options);
// Create a Deferred, an interface to which will be returned immediately upon the completion of the function
var dfd = jQuery.Deferred(),
dialogOptions = {
"Yes":function() {
// Resolve the Deferred, passing 'true' to indicate the user's choice
"No":function() {
// Close the dialog
close:function() {
// Deferreds can only be resolved once.
// if the user chose "Yes," the Deferred will already have resolved, passing 'true'
// If the user chose "No," only then will the Deferred resolve 'false'
// Return the Deferred's "promise," which allows the consumer of the code to observe - but not manipulate - the Deferred
return dfd.promise();
// The module returns an interface to use the confirmation
return confirmation;
// Usage
require("bocoup.confirm",[],function(confirmation) {
$("#upgrade").click(function() {
// To create a custom modal confirmation that will react only when the user has decided yes or no, use the confirmation module
// The 'then' and 'fail' callbacks can be chained directly to the confirmation function, because it returns the promise interface
confirmation("Are you really sure you want to upgrade to jQuery 1.5?")
.then(function(confirmed) {
// Test to see how the deferred was resolved and act accordingly
if (confirmed) {
alert("Great Decision!");
} else {
alert("I am truly sorry for your loss");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment