Question

Basically, I’ve got a table displays a few rows with a delete button next to them. When someone clicks on the delete button, I take the ID of that button, pass it to a php script, delete the record from the database, and then fade the row out from the page. Here’s the code:

$(".remove-button").live('click', function(){
     var remove_ptype = encodeURIComponent($(this).attr("id"));

     $.ajax({
      type: "POST",
      dataType : "html",
      url: "script.php",
      data: "id of remove button goes here",
      success: function(msg){
      //Do nothing
       }
      });
     $(this).parent().parent().fadeOut(500);
     });

OK, next step. Also have an add button, which opens up a dialogue, which then processes a script, returns some data and appends appends another row for the data entered. This script also returns an id for the delete button just which would then be used by the above code. Here’s the appending code:

$("<tr>" +
         "<td>" + unescape(name) + "</td>" + 
         "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" + 
        "</tr>").appendTo( "#ptypes tbody" );

So this works beautifully so far. Now when I try to delete this newly added row without refreshing the page, it does get removed from the screen just fine, but I am unable to pick up the ID of this newly appended .remove-button and pass it to my php script. I know it’s possible as I’ve seen it done before in other applications (like basecamp). So, can anyone please guide me on how I can accomplish this?

FYI, I’m using JQuerUI to create the dialogue box, etc.

Thanks so much for your help!

---

ADDITION TO ORIGINAL MESSAGE

OK so the ID was indeed not showing up. I’ve got it to show up and it works, but I still have an issue. Here is the code for my jQUERY:

$( "#add-type-form" ).dialog({
                            autoOpen: false,
                            height: 350,
                            width: 500,
                            modal: true,
                            buttons: {
                                "Add": function() {
                                    var type_name = encodeURIComponent($('#type_name').attr('value'));
                                    var type_id = '';
                                    if (type_name != "") {  
                                        //Submit form
                                        $.ajax({
                                        type: "POST",
                                        dataType : "html",
                                        url: "script.php",
                                        data: "f=1" + "& ff=2" + "MORE STUFF",
                                        success: function(msg){
                                        types_id = msg;
                                        }
                                        });
                                        type_id = types_id;
                                        //Append to display                                         
                                        $("<tr>" +
                                                "<td>" + unescape(type_name) + "</td>" + 
                                                "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" + 
                                            "</tr>").appendTo( "#ptypes tbody" );
                                        $( this ).dialog( "close" );
                                    }},
                                Cancel: function() {
                                    $( this ).dialog( "close" );
                                }
                            },
                            close: function() {
                                allFields.val( "" ).removeClass( "ui-state-error" );
                            }
                        });

So this is a JQUERYUI diagloue, which basically processes the script, returns the id that I want to assign to my img tag. The trouble is, that the add button has to be pressed twice for some reason. If I remove the line where I assign a value to my type_id varaible after the ajax function, i.e.:

type_id = types_id;

I can’t get the type id. If the line stays in there, the add button has to be clicked twice. I’m not sure why that’s happening. I am sure that it is my lack of JS knowledge, so I’m seeking help because I don’t see anything wrong with the variable declaration per se.

Thanks again!

Answer 1

This question seems pretty related to what you’re doing: jquery Find ID of dynamically generated tr tag

The code mentioned looks like this, but I think you can rewrite it to your needs:

$("a[href='delete.php']").click(function(e){
   var tr = $(this).closest('tr'),
       id = tr[0].id;

   // Put your AJAX call here
   $.post('/delete/' + id, function(){
       // Animate up, then remove
       tr.slideUp(500, function(){
          tr.remove();
       });
   });

});

If you’re running Chrome or Firefox, are you even able to see the id of the button in the first place? It could be that it isn’t even being appended…

Good luck!

---

It looks like you are not waiting for a response to your query, which is probably why you have to click the button twice. I’ve hacked together a (hopefully working) version of your script that waits for the query to finish before closing the dialog and doing all of that other clockwork:

$("#add-type-form").dialog({
    autoOpen: false,
    height: 350,
    width: 500,
    modal: true,
    buttons: {
        "Add": function() {
            var type_name = encodeURIComponent($('#type_name').attr('value'));
            var type_id = '';
            var this_old = $(this); // Because $(this) won't really work inside of a anonymous function, you have to back up the original $(this) to another variable.

            if (type_name != "") {
                //Submit form
                $.ajax({
                    type: "POST",
                    dataType: "html",
                    url: "script.php",
                    data: "f=1" + "& ff=2" + "MORE STUFF",
                    success: function(msg) {
                        types_id = msg; // I'm not exactly sure if you need these two lines, but I'll keep them here anyways.
                        type_id = types_id;

                        //Append to display                                         
                        $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendTo("#ptypes tbody");
                        this_old.dialog("close");
                    }
                });
            }
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

Maybe this would work?