James Dorrian James Dorrian - 19 days ago 6
Ajax Question

Issue regarding ajax and identifying data from a table

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:
This is the table i created

Answer

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