jQuery: Global Delete Confirmation
You need to start with document ready of course, and include your jQuery script in your page as shown below, then adding a delete confirmation to any button is as easy as this:
<script type="text/javascript" src="jQuery/jQuery-1.4.2.js"></script>
$(document).ready(function(){
// here's the magic:
$('.delete').click(function(){
// this will display a confirm (ok/cancel) pop-up box
var result = confirm('Are you sure you want to delete?');
if(result == true){
// this will allow the form to submit
return true;
}else{
// this will stop form from submitting
return false;
}
}); // ends the delete.click
}); // ends document.readyAnywhere you apply the class=”delete” attribute (should be on a button or something that submits the form) jQuery will pop this up and then either submit or kill the form. Neat huh?
confirm, delete, global, javascript, jQuery
nice….but how to customize the message box? it's seem so simple, ex : give the colour ?
Willy, since this is a default box, you really can't style it and use it in the same way.
This is just a demo of how you can have site-wide jquery functions by using a class that will make jquery fire when clicked. You can put anything inside the function, so if you want to show your own box, a div styled with css, let's say, you totally can. You would just have to handle the button click events differently. Here's how I would do it=>
insert this where the line begins with 'var result = confirm…'
document.write('<div id="msg" style="position: absolute; top: 20%; margin: 0 auto;">');
document.write("Are you sure?");
document.write('<input type="button" id="yesbutton" value="yes" /> <input type="button" id="nobutton" value="no" />');
document.write('</div>');
then, these should be outside this delete function, but just inside the end of your document.ready, because these are still jquery functions:
$('#yesbutton').click(function(){
formnamehere.submit(); //submits the form with with name 'formnamehere'
});
$('#nobutton').click(function(){
$('#msg').hide(); // hides your custom box with id 'msg'
});
This gives you essentially the same thing as above, with the ability to use css to style a div that contains the yes and no buttons. This should give you the same thing. If you want to really make this look nice, you can add a line that tiles a png image making the page behind a transparent black, like a lightbox, but positioning can be tricky, using z-index to float the confirm box above the background. More on that another time.
Here is the modified code to do what you're asking about. You'd also have to add styles to css, or inline on the div to color things.
//css code
#msg{color: #000000; /* turns text black */ background: #CCC; /* turns the background gray */}
//javascript + jquery code
$(document).ready(function(){
// here's the magic:
$('.delete').click(function(){
//this will write a div to the screen, and use an inline style to center it on the page, 20% below the top of the page.
document.write('<div id="msg" style="position: absolute; top: 20%; margin: 0 auto;">');
document.write("Are you sure?");
document.write('<input type="button" id="yesbutton" value="yes" /> <input type="button" id="nobutton" value="no" />');
document.write('</div>');
}); // ends the delete.click
$('#yesbutton').click(function(){
formname.submit(); //submits the form with with the name 'formname' (or whatever you named your form)
});
$('#nobutton').click(function(){
$('#msg').hide(); // hides your custom box with id 'msg'
});
}); // ends document.ready
Hope this helps, if not let me know, I'll find some more code, ideas, to help you out.