Issue regarding ajax and identifying data from a table

Question

I'm desperately trying to gain access to the $BarcodeID by pressing the DELETE button on my site. All I want to do is retreive this 13 digit number, so that I can use it to remove that row from the item Database (Sql).

I know that as long as I get the correct row I can get the data but i'm wondering if thats even possible because I'm building the table inside a $.post().

Please note that before i started trying to make the button and get the barcodeID in the click function all of the code was working. Thanks!

$(document).ready(function(){
$.get("../php/security.php", function(response){
        if(response.result == "failure"){
            location.href='../user_login.html';
        } else {
            $("#header").load("../header_logout.html");
            $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){
                indata.items.forEach(function(element){
                    $BarcodeID = element.BarcodeID;
                    $UserID = element.UserID;
                    $ProductName = element.ProductName;
                    $BrandName = element.BrandName;
                    $Weight = element.Weight;
                    $row = "<tr><td id='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>";
                    $("#final_row").before($row);
                });
            }, "json");//eo post
        } //eo else
 }, "json"); //eo get

$(".delete").click(function(){
    // var BarcodeID = $(this).closest('tr').find('#rowbarcode').val();
    var BarcodeID = $(this).parent().find("#rowbarcode").text();
    var $row = $(this).closest("tr");        // Finds the closest row <tr> 
    var $tds = $row.find("td:nth-child(1)"); // Finds the 2nd <td> element
    console.log($tds);
    //all I want is $BarcodeID
});

});//eof

Image of table on site:

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Nov 19 '16 at 15:24
Nothing happens when i click the button, even if I put an alert in the .click function it doesnt execute for some reason — James Dorrian, Nov 19 '16 at 15:27
The code that sets up the delete function will look for elements with class "delete" at the time it runs. Elements added *after* that will not be affected. Read the linked question about event binding on dynamically added elements; it's extremely easy to set that up. — Pointy, Nov 19 '16 at 15:28
Also side note. Your post is creating rows with the td having a static id. Ids cannot be repeated on a single page. 'rowbarcode' should be a class just like you have 'delete' a class. — Taplar, Nov 19 '16 at 15:36

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Just for anyone who's interested I found a pretty neat way of solving my problem. Thanks to everyone who helped @Pointy @Taplar @Andreas. What I needed was 'event binding on dynamically created elements'. It is particularly useful when linked with $.post and $.get operations as they complicate data retreival.

Sample output to console:

5000157024671 <- if i clicked the first delete button

6221033101517 <- if i clicked the second delete button

Next stage: As this is only a reference to a barcode number which has to be removed from the DB I will now pass this onto php via a post operation.

Next part of my project (adding a row search feature) can be found here: Dynamically created table queries

Sample solution code:

$(document).ready(function(){
$.get("../php/security.php", function(response){
        if(response.result == "failure"){
            location.href='../user_login.html';
        } else {
            $("#header").load("../header_logout.html");
            //from here down is the relevant code
            $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){
                indata.items.forEach(function(element){
                    $BarcodeID = element.BarcodeID;
                    $UserID = element.UserID;
                    $ProductName = element.ProductName;
                    $BrandName = element.BrandName;
                    $Weight = element.Weight;
                    $row = "<tr class='row'><td class='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>";
                    $("#final_row").before($row);
                });
            }, "json");//eo post
        } //eo else
 }, "json"); //eo get

$(".contenttable").on('click', '.delete', function(){
    var BarcodeID = $(this).closest('tr').find('.rowbarcode').text();
    console.log(BarcodeID);
});

});//eof

Issue regarding ajax and identifying data from a table

1 Answers1