how to get append table data and getting clicked table row data using jquery

Question

I'm trying to append some table row data using ajax and getting that data via jquery but the thing is both functions are working.

this code function well

function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            alert(data);
            console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr id="'+ value.poid + '">';
                event_data += '<td id="co">' + value.countt + '</td>';
                event_data += '<td id="po">' + value.podetail + '</td>';
                event_data += '<td id="sa">' + value.saless + '</td>';
                event_data += '<td id="pr">' + value.productt + '</td>';
                event_data += '<td id="qt">' + value.qty + '</td>';
                event_data += '<td id="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog()" type="submit" name="insert" id=" '+ value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

in this code also function well but alert shows nothing(empty)

function dog() {

    var $row = $(this).closest("tr");    // Find the row
    var $text = $row.find('#co').text();
    alert($text);

    var podetail = $('#list_table_json').closest("tr").find('td:eq(0)').text();
    var pocode = $(this).closest("tr").find('td:eq(1)').text();
    var saleline = $(this).closest("tr").find('td:eq(2)').text();
    var product = $(this).closest("tr").find('td:eq(3)').text();
    var qty = $(this).closest("tr").find('td:eq(4)').text();
    alert(podetail);}

how do I get the data?

JulienCC · Accepted Answer · 2019-10-26 12:20:20Z

1

Your question seems unclear to me but maybe try this :

function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            alert(data);
            console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr class="'+ value.poid + '">';
                event_data += '<td class="co">' + value.countt + '</td>';
                event_data += '<td class="po">' + value.podetail + '</td>';
                event_data += '<td class="sa">' + value.saless + '</td>';
                event_data += '<td class="pr">' + value.productt + '</td>';
                event_data += '<td class="qt">' + value.qty + '</td>';
                event_data += '<td class="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog()" type="submit" name="insert" id=" '+ value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

function dog() {
    var $row = $(this).closest("tr");    // Find the row
    var $text = $row.find('.co').text();
    alert($text);

    var podetail = $(this).closest("tr").find('td:eq(0)').text();;
    var pocode = $(this).closest("tr").find('td:eq(1)').text();
    var saleline = $(this).closest("tr").find('td:eq(2)').text();
    var product = $(this).closest("tr").find('td:eq(3)').text();
    var qty = $(this).closest("tr").find('td:eq(4)').text();
    alert(podetail);
}

I replaced "id" by "class" since there can only one element with a specific id per page. There's a chance that the first element with the "co" id is empty, this is the reason why you only get empty values when searching by id.

answered Oct 26, 2019 at 12:20

JulienCC

5383 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JulienCC Over a year ago

I guess it means that both alerts are empty. Is it normal that you use "value.countt" ? Maybe it is "value.count" with a single "t" ?

Sandun Wijerathne Over a year ago

nope, that function work properly I got all data, the issue is that "dog" function. I think this code has the issue " var podetail = $(this).closest("tr").find('td:eq(0)').text();"

JulienCC Over a year ago

Well you could try with "var podetail = $(this).closest("tr").find('.po').text();" but since it doesn't work few lines before I bet it won't work either.

Sandun Wijerathne Over a year ago

check below code, I make some upgrade to my code. there is an issue with this part $(this).closest("tr")

Sandun Wijerathne · Accepted Answer · 2019-10-26 17:01:23Z

I make this update to my code

    function podetails(pid) {
    $.ajax({
        url: "../phpfile/getpurchaseordetails.php?pid=" + pid,
        dataType: 'json',
        type: 'post',
        cache: false,
        success: function (data) {
            // alert(data);
            // console.log(data);
            var event_data = '';
            $.each(data, function (index, value) {
                console.log(value);
                event_data += '<tr class="' + value.poid + '">';
                event_data += '<td class="co">' + value.countt + '</td>';
                event_data += '<td class="po">' + value.podetail + '</td>';
                event_data += '<td class="sa">' + value.saless + '</td>';
                event_data += '<td class="pr">' + value.productt + '</td>';
                event_data += '<td class="qt">' + value.qty + '</td>';
                event_data += '<td class="da">' + value.date + '</td>';
                event_data += '<td><button class="btn btn-dark editt" onclick="dog(' + value.poid + ')" type="submit" name="insert" id=" ' + value.poid + '">Edit</button></td>';
                event_data += '</tr>';
            });
            $("#list_table_json > tbody").empty();
            $("#list_table_json").append(event_data);
        },
        error: function (d) {
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
}

function dog($dag) {

    var podetail = $('.'+$dag).find('td:eq(0)').text();
    var pocode = $('.'+$dag).find('td:eq(1)').text();
    var saleline = $('.'+$dag).find('td:eq(2)').text();
    var product = $('.'+$dag).find('td:eq(3)').text();
    var qty = $('.'+$dag).find('td:eq(4)').text();
    alert(podetail);}

Collectives™ on Stack Overflow

how to get append table data and getting clicked table row data using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related