Skip to content

Instantly share code, notes, and snippets.

@johnnyreilly

johnnyreilly/confirm.html

Last active December 29, 2015 08:19
Show Gist options
  • Save johnnyreilly/7642597 to your computer and use it in GitHub Desktop.
Save johnnyreilly/7642597 to your computer and use it in GitHub Desktop.
Download ZIP
Rolling your own confirm mechanism using Q and jQuery UI
Raw
confirm.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Roll your own confirm</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
body {
padding: 0em 1em 0em;
}
p {
padding-top: 1em;
}
</style>
</head>
<body>
<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>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://s3-us-west-1.amazonaws.com/q-releases/q.js"></script>
<script>
$(function () {
/**
* Show a "confirm" dialog to the user (using jQuery UI's dialog)
*
* @param {string} message The message to display to the user
* @param {string} title OPTIONAL - The title of the dialog box, defaults to "Confirm..."
* @param {string} okButtonText OPTIONAL - The OK button text, defaults to "Yes"
* @param {string} cancelButtonText OPTIONAL - The Cancel button text, defaults to "No"
*/
function confirm(message, title, okButtonText, cancelButtonText) {
if (typeof title === "undefined") { title = "Confirm..."; }
if (typeof okButtonText === "undefined") { okButtonText = "Yes"; }
if (typeof cancelButtonText === "undefined") { cancelButtonText = "No"; }
var deferred = Q.defer();
$('<div title="' + title + '">' + message + '</div>').dialog({
modal: true,
buttons: [
{
// The OK button
text: okButtonText,
click: function () {
deferred.resolve(true);
$(this).dialog("close");
}
},
{
// The Cancel button
text: cancelButtonText,
click: function () {
$(this).dialog("close");
}
}
],
close: function (event, ui) {
$(this).dialog("destroy").remove();
if (deferred.promise.isPending()) {
deferred.resolve(false);
}
}
});
return deferred.promise;
}
$("#dialogButton").click(function () {
var confirmMessage = $("#confirmMessage").val();
if (confirmMessage) {
var confirmTitle = $("#confirmTitle").val(),
confirmOKButtonText = $("#confirmOKButtonText").val(),
confirmCancelButtonText = $("#confirmCancelButtonText").val();
if (!confirmTitle) { confirmTitle = undefined; }
if (!confirmOKButtonText) { confirmOKButtonText = undefined; }
if (!confirmCancelButtonText) { confirmCancelButtonText = undefined; }
confirm(confirmMessage, confirmTitle, confirmOKButtonText, confirmCancelButtonText)
.then(function (confirmed) {
$("#results").html("And the result of the confirm was: " + confirmed);
})
}
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment