/**
* Show a "confirm" dialog to the user (using jQuery UI's dialog)
*
* @param {string} message The message to display to the user
* @param {string} okButtonText OPTIONAL - The OK button text, defaults to "Yes"
* @param {string} cancelButtonText OPTIONAL - The Cancel button text, defaults to "No"
* @param {string} title OPTIONAL - The title of the dialog box, defaults to "Confirm..."
* @returns {Q.Promise<boolean>} A promise of a boolean value
*/
function confirmDialog(message, okButtonText, cancelButtonText, title) {
okButtonText = okButtonText || "Yes";
cancelButtonText = cancelButtonText || "No";
title = title || "Confirm...";
var deferred = Q.defer();
$('<div title="' + title + '">' + message + '</div>').dialog({
modal: true,
buttons: [{
// The OK button
text: okButtonText,
click: function () {
// Resolve the promise as true indicating the user clicked "OK"
deferred.resolve(true);
$(this).dialog("close");
}
}, {
// The Cancel button
text: cancelButtonText,
click: function () {
$(this).dialog("close");
}
}],
close: function (event, ui) {
// Destroy the jQuery UI dialog and remove it from the DOM
$(this).dialog("destroy").remove();
// If the promise has not yet been resolved (eg the user clicked the close icon)
// then resolve the promise as false indicating the user did *not* click "OK"
if (deferred.promise.isPending()) {
deferred.resolve(false);
}
}
});
return deferred.promise;
}
$(function () {
$("#dialogButton").click(function () {
var confirmMessage = $("#confirmMessage").val();
if (confirmMessage) {
confirmDialog(confirmMessage,
$("#confirmTitle").val(),
$("#confirmOKButtonText").val(),
$("#confirmCancelButtonText").val())
.then(function (confirmed) {
$("#results").html("And the result of the confirm was: " + confirmed);
});
}
});
});
<h3>Roll your own confirm</h3>
<div class="form-group">
<label for="confirmMessage">Message</label>
<input type="text" class="form-control" id="confirmMessage" placeholder="Enter confirm message" value="Answer me this!">
</div>
<div class="form-group">
<label for="confirmTitle">Title</label>
<input type="text" class="form-control" id="confirmTitle" placeholder="Enter confirm title (optional)">
</div>
<div class="form-group">
<label for="confirmOKButtonText">OK Button text</label>
<input type="text" class="form-control" id="confirmOKButtonText" placeholder="Enter confirm OK Button text (optional)">
</div>
<div class="form-group">
<label for="confirmOKButtonText">Cancel Button text</label>
<input type="text" class="form-control" id="confirmCancelButtonText" placeholder="Enter confirm Cancel Button text (optional)">
</div>
<button type="button" class="btn btn-primary" id="dialogButton">Show me the dialog...</button>
<p><strong class="text-success" id="results"></strong></p>
body {
padding: 0em 1em 0em;
}
p {
padding-top: 1em;
}