Delete Tabular Data using PHP/Jquery with confirmation dialog box

• Tweet

• Tweet

Almost 2 months ago,  I wrote an article about how to Remove data in a div using jQuery . 2 of my readers asked me how could you delete the data via ajax if it is in a html table . This is what this article is all about.  I have also added a confirmation dialog box using jQueryui Modal Confirmation .The modal box prompts the user if he or she wants to really delete the data or not.  This is useful to prevent accident deletion of your data.

You can check out an online Demo here :

Online Demo || Download Source Code

I have fully commented the code below ,i think it should not be that difficult to understand .

/*Hiding the div with ID dialog-message and #confirmation_dialog
 These 2 divs are responsible for the modal boxes .
 */

$("#dialog-message").hide();
$("#confirmation_dialog").hide();

/*a Function to Initialise a Dialog instance for the modal box */
function modal_message()
{

 $("#dialog-message").dialog({
 modal: true,
 buttons: {
 Ok: function() {
 $(this).dialog('destroy');

 }
 }
 });
}

$('a.delete').click(function(e){ // if a user clicks on the "delete" image
e.preventDefault(); //prevent the default browser behavior when clicking
var row_id =     $(this).attr('id');
var parent =   $(this).parent().parent();

 $('#confirmation_dialog').dialog({

/*Initialising a confirmation dialog box (with  cancel/OK button)*/

 autoOpen: false,
 width: 600,
 buttons: {
 "Ok": function() { //If the user choose to click on "OK" Button

 $(this).dialog('close'); // Close the Confirmation Box

 $.ajax({//make the Ajax Request
 type: 'get',
 url: 'ajax_delete.php',
 data: 'delete=' + row_id,
 beforeSend: function() {
 parent.animate({'backgroundColor':'yellow'},600);
 },
 success: function(response) {//if the page ajax_delete.php returns the value "1"
 if(response=='1'){
 parent.slideUp(600,function() {//remove the Table row .
 parent.remove();
 });

 modal_message();//Display the success message in the modal box
 }else {
 alert('We could not delete it !');//if ajax_delete.php does not return the value "1"
 }

 }
 });
 },
 "Cancel": function() { //if the User Clicks the button "cancel"
 $(this).dialog('close');
 }
 }
 });

 $('#confirmation_dialog').dialog('open');

//Display confirmation Dialog when user clicks on "delete Image"

 return false;

 });
});

Credits and Summary :

For the CSS  Styled Table  , i am using the veerle’s code .You would probably be deleting data from a Database ,so I highly recommend you to check out my previous article with a fully functional deleting system (including the database part ) .You can also change the look of the modal dialog by referring to this article ( Check out the Theming Tab) .Feel free to drop me a comment  below . Any suggestion  for improvement are welcome.

Related Posts

1. Remove data in a div after successfully deleted using Jquery

Tagged as: Delete using Jquery, Tabular Data CSS