Jquery Ajax remove rows from table and in db

Question

Hello Everyone.

I have a html table which if filled by values of an mysql table. This way:

function getCategories(){
 $prod = new C_Product();
 $cat= $prod->getCategorieenAsArray();

 $tr = "";
 foreach ($cat as $key => $value){
  $tr.="<tr><td>&nbsp;</td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n";

 }
 return $tr; 

}

Now I want to be able when i press the delete button to remove that row from the database and to refresh the table so that it's actually removed also from the table on the html page. I want to use for this jQuery and Ajax. That shouldn't be to difficult for me. My question is how to select the row that is going to be deleted? How would the jquery know which img is pressed?

Should i add a class to the img / tr with a value in it? If I use an id I would have to redefine my jquery function for each row that's being added and thus doesn't seem a right solution.

So can anyone please help me further?

Thanks

//edit:

In the mean time I went on my own way to try figure stuff out and I have now a complete ajax call with the correct id.

jQuery(document).ready(function(){

 jQuery("img.deleterow").click(function(){
  id = jQuery(this).parent().attr("id");
  jQuery.ajax({
   type: "POST",
   data: "id=" +id,
   url: "ajax_handler.php",
   success: function(msg){
    jQuery(this).parent().remove();
   }
  });

 });
});

Now the only problem I have is to remove the tr from the table when the id is deleted in the database. This is how my tr looks like:

$tr.="<tr><td>&nbsp;</td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n";

Answer 1

Normally I would use a link instead of purely an image for that purpose. Since it is semantically correct:

and then

$(".deleteButton").click(function() { var deleteId = $(this).attr("href").substring(10); // Ajax or URl call etc. });

One step further, I will even not put any image within the a, just put something like:

<a href="..." class="...">Delete this row</a>

and leave any styling rule to CSS to handle (like image replacement).

Answer 2

I would defintely add a class to the the img or tr and would also add an ID that has the ID of the element in the database

but if you don't it would be somethng like this

$('img').click(function(){
   var id = $(this ~ tr).attr("id");
   $.ajax(type: "POST",
          url: "some.php",
          data: "id="+id,
          success: function(msg){
             $(id).remove();
   });
});

EDIT TO YOUR EDIT:

Have you tried the $("#id ~ tr") selector to remove it? e.g. $(#id ~ tr).remove();

I would also put the ID on the tr if you are adding IDs then it would be $('#id').remove(); to get rid of the tr

Answer 3

See this question. It will help you get the row and column index of a table cell. Then make the Ajax call to remove the entry from the database. On the success callback remove the row from the table using standard jQuery actions. You may want to block access to the html page, while the Ajax call is in progress. This will prevent the user from clicking another image.

Answer 4

Your intuitions about this problem were on the right track. You need to pass the database id of each record and store it somewhere in the HTML so that you know what value to pass to the backend. If you were planning to implement a solution that degrades gracefully for users without javascript (usually a good idea) what you might do is implement a non-ajax view that deletes a single row. If your application uses pretty URLs, that view might be accessed by /table/delete/23 (or whatever id). In you table generation code, you want to add a link for each row that looks like this:

<a class="delete-button" href="/table/delete/23">Delete</a>

At this point, you should have a nicely working non-javascript solution. Now we can add the AJAX. This script uses some javascript string mangling to extract the last part of the href and turn it into an id.

$(".delete-button").click(function() {
    var id = this.href.slice(this.href.lastIndexOf('/')+1);
    // perform AJAX call using this id
    return false; // return false so that we don't follow the link!
});

Also, when you are implementing your backend PHP function to accept the AJAX request, don't forget to sanitize your input!