Display child rows with different ajax/php data

kkihmm

Hello, trying to display child rows buy linking a key to another ajax call. Seems not to be working, somehow the data is not being delivered correctly. Any help would be great. Example/test URL: https://manoa.hawaii.edu/jabsom/admin/LCMECC/standard1_bk2.php

$(document).ready(function() {
var TicketID = $("#txtTicketID").val();
var table = $('#example').DataTable( {
//"processing": true,
// "serverSide": true,
"ajax": "server_processing2.php",
"type": "GET",
"cache": false,
"columns":
[
{ "class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "className": "replyIdClass",
"data": "date_inputted"
},
{ "data": "responsible_person" },
{ "data": "task" },
{ "data": "comment" },
{ "data": "grade" }
],
"order": [[1, 'asc']]
}); //end var table

$('#example').on('click', 'td.details-control', function () {

    var id = $(this).closest('tr').find('.replyIdClass').text();
    var tr = $(this).closest('tr');
    //var row = table.row( tr );
    var row = $('#example').DataTable().row(tr);

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        //row.child( format(row.data()), id ).show();
        format(row.child, id); // here pass the replyIdClass variable to function format
        tr.addClass('shown');
    }//end else
});//end on click

function format ( callback, vRid ) {
    //var TicketID = $("#txtTicketID").val();
    var repId = $(this).text();
    $.ajax({
        type: "GET",
        serverSide: true,
        url: "server_processing2.php",
        //url: "include/data.txt",
        dataType: "json",
        cache: false,
        complete: function (response) {
            var data = JSON.parse(response.responseText);
            console.log(data);
            var tbody = "";
            // print each child item to match with parent
            $.each(data, function (index, value) {
                tbody += "<tr><td>" + value.date_inputted + " testingtesting " + value.responsible_person  + "this is data" + data + " and function( " + index + " ," + value + ")</td></tr>";
            }); // end each

            console.log("<table>" + tbody + "</table>");
            //return 
            callback($("<table>" + tbody + "</table>")).show();
        },// end complete
    }); // end ajax
}// function format

});//end ready function

allan

Try replacing:

$.each(data, function (index, value) {

with:

$.each(data.data, function (index, value) {

Your JSON return contains the array of data you want in the data property.

Allan

kkihmm

You da bomb! Thank you!!!!!!!!