Jquery Ajax remove rows from table and in db

Question

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

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


        

Answer 1

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 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

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 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!