Learning jQuery, Day 6 : Double Confirmation
I'm just wrapping up a site for a client that handles work orders and, while they need the functionality to cancel a work order, they wanted a double confirmation. In this post, we'll look at accomplishing this with jQuery and a jQuery plugin.
First, you may want to look at the effect. It's available at http://dev.citymind.com:8500/test/blog_jquery/day7/confirm2.cfm.
The plugin for the confirmation is available at http://abeautifulsite.net/notebook/87. I've included it in the zip file, but you'll want to explore the options available at the site.
Here's the code:
<head>
<link rel="stylesheet" href="jquery.alerts/jquery.alerts.css">
<script src="/jquery/jquery-latest.js"></script>
<script src="jquery.alerts/jquery.alerts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cancel').click(function(){
jConfirm('Are you sure you want to cancel this work order?', 'Cancel? Really?', function(response){
if (response){
jConfirm('Are you absolutely sure you want to cancel it?', 'Not so sure about this...', function(response){
if (response){
$('#cancel').remove();
$('#results').html('<img src="25.gif" border="0">').append('Canceling work order');
do stuff to cancel the work order
} else {
$('#results').html('Whew! I thought you were really going to go through with this!');
}
})
}
})
});
});
</script>
</head>
<body>
<a href="#" id="cancel">Cancel work order</a>
<div id="results"></div>
</body>
</html>
I've used the default stylesheet that comes with the plugin, but, of course, you can supply your own. After loading the base jQuery library and the plugin script, I'm ready to start with the ubiquitous $.document(ready) function of jQuery. As I explained in a previous post, this function will run when the DOM has been built and is ready for processing.
Within that function, I begin by assigning an event handler to the "cancel" element's "click" event. When the user clicks "Cancel work order", the "jConfirm" function is called and supplied with three arguments: text to display, a title for the confirmation window, and a callback function.
Callbacks are used extensively with jQuery (and with JavaScript in general). The function provided will be called when the user clicks on either button; this is where I'll put the logic for what to do next. If the user confirms the confirmation, I'll ask them to confirm it again. If they click "No", we'll exit the JavaScript.
The only thing mildly tricky is the use of chaining in this line of code:
Well-behaved jQuery functions (including plugins) return the original jQuery object which is, in this case, the DOM element with an id of "results" wrapped in a jQuery object. Since I already have a handle on the "results" DOM element, I can call "append".
Could I have simply included the message, "Canceling work order" in the ".html" call? Sure. I did it this way as an illustration of jQuery chaining -- something else that jQuery scripters use a good deal.
This is news I can use.
More More More!
if (confirm('Are you sure?') && confirm('Are you REALLY sure?'))
The second is only prompted if first is true.
Features jQuery:
* Move the tree DOM, including support XPath as a plug;
* Event;
* Visual effects;
* AJAX-supplements;
* JavaScript-plugins.
You can find many applications for your sites on http://www.queentorrent.com and free to download.
Barron CEO @ http://www.btscene.com