[CodeSnippet] jQuery : Confirm User’s Action
Posted on March 26, 2010 and got 9 shouts so farDon’t let your link that have a critical action (such as delete some data or something else) fly away on their own self, we must put a confirmation before do the action to prevent user’s mistake. Now, let us make that one.
Java Script has a built-in function to create a user confirmation box ( confirm() ), it means we can call that confirmation box to confirm user’s action. So if the user click a link, they must confirm that before we process the action. If the answer is cancel the default action will be cancelled and vice versa. We can use preventDefault() function to cancel the default action from our link. Take a look at following script. (Implementation #1).
$('.ask-plain').click(function(e) {
e.preventDefault();
thisHref = $(this).attr('href');
if(confirm('Are you sure')) {
window.location = thisHref;
}
});
If the user click the link we cancel its default action, grab its default link and confirm the user. If the user confirms his action then we’ll redirect to the default link. But that’s too plain, we’ll replace them with a cute one by adding some CSS properties and jQuery magic. (Implementation #2 and #3).
$('.ask').click(function(e) {
e.preventDefault();
thisHref = $(this).attr('href');
if($(this).next('div.question').length <= 0)
$(this).after('
Are you sure?
YesCancel
');
$('.question').animate({opacity: 1}, 300);
$('.yes').live('click', function(){
window.location = thisHref;
});
$('.cancel').live('click', function(){
$(this).parents('div.question').fadeOut(300, function() {
$(this).remove();
});
});
The process is similar to the first script, but we’ll use our customized confirmation box (div with class question) instead of confirm() function. By attaching div element after clicked link element, our confirmation box will appear and displaying a confirmation. If the user confirms his action then we’ll redirect to the default link, else we’ll remove our confirmation box. That’s it, we have a cute confirmation box 
What They Shouts
Shout Something
The Artist
Hidayat Sagita is an ambush artist living in Jakarta, Indonesia, he manages to gain some codejutsu like JavaScript, CSS, Ruby and PHP. Though he's not such a strong ninja, he keeps trying to do his best somehow. Need a help for the jutsu? Just drop him a scroll.
Popular Post
Stuff & Community News
Tags Collection
Confirmation popup messages are the worst thing to do!
Try reading http://www.webia.info/articles/usability/buttons-and-usability/ series to see how’s the best way to go for this.
This is just what I needed. Thanks for the help!
Can Any one please forward me how to learn j Query
I has programing knowledge in asp.net.. so I would be very much easier to understand .attr(“href”) rather than get(“0″).href or getAttribute(“href”) or any other which makes easier to understand.. Thanks in Advance…
You can read this tutorial http://www.webstuffshare.com/2010/06/jquery-fundamentals/
I prefer alert/confirmation over data integrity issue. I’d prefer my users to be aware that they’re on the website for the data, unless it’s a non-critical website, in which case, I hate alerts as much as anyone else.
Thanks a lot, that’s just what I needed. Nice hack!
what happens if java is turned off or not installed.
I have a BCS project which pulls data from SQL server 2008 and displays it as a List in sharepoint 2010. I want to add a code snippet to check the logged in user and show/hide delete confirmation box for any list item. I have no idea on where I would make the changes. Please help me !
The box seems to open more than once (repetitive) if we did not click Yes or Cancel button. And click another link (Link is in the loop).
How can I only show 1 box, even though I click again on other links without to press yes or cancel button first on the last box.
and the box that shows up is the one that click last.
any suggestion?
Thanks!