Display php created table from jquery code - datatables drill down rows - php

Question

I have a datatable that I am attempting to put drill-downs into based on the output of a php file, but I am having a few issues I can't seem to figure out. I am using http://datatables.net/blog/Drill-down_rows as a guide. So far this is my code:
Javascript:
<script type="text/javascript">
$("tr").live("click", function(){
var nTr = this;
var i = $.inArray(nTr, anOpen);
//oTable = my datatable
var oData = oTable.fnGetData(nTr);
if(i === -1) {
$(this).addClass('row_selected');
//THIS IS WHERE I AM GETTING A LITTLE LOST
//I WANT THE VALUE OF response.details TO BE STORED IN nDetailsRow
//oData.url is a mDataProp stored in the datatable row that contains the PHP link (this works okay)
var nDetailsRow = $.get(oData.url, function(response) {
//I don't really understand exactly what this is doing... but response.details is what I want to display from PHP
oTable.fnOpen(nTr, response.details, 'details');
});
//THIS LINE DOES NOT WORK CORRECTLY BECAUSE nDetailsRow IS NOT WHAT I WANT IT TO BE
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
else {
...
}
}
</script>
PHP:
<?PHP
$tableOut = '<div class="innerDetails">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tr><td>Test Cell:</td><td>This is a test</td></tr>
</table>
</div>';
$data = array();
$data['details'] = $tableOut;
echo json_encode($data);
?>
I feel like I am almost there, but I don't quite understand the ajax $.get and am not sure if I am actually getting the JSON correctly from the PHP file. I also don't quite understand how to store that JSON in the active jquery code. Any ideas on how to accomplish these tasks and how to get my drill-down to display the PHP JSON data response.details?

Answer 1

I figured it out almost immediately after posting, I needed to use $.getJSON and include the last two lines inside that function. I am now using the following code which appears to work correctly:
<script type="text/javascript">
$(document).on("click", "tr", function(){
var nTr = this;
var i = $.inArray(nTr, anOpen);
//oTable = my datatable & oData.url is the mDataProp link to the PHP page
var oData = oTable.fnGetData(nTr);
if(i === -1) {
$(this).addClass('row_selected');
$.get(oData.url, function(response) {
oTable.fnOpen(nTr, response.details, 'details');
$('div.innerDetails', response.details).slideDown();
anOpen.push(nTr);
});
else {
...
}
}
</script>
Edit: Added/changed code from suggestions

Answer 2

<script type="text/javascript">
$("tr").live("click", function(){
var nTr = this;
var i = $.inArray(nTr, anOpen);
//oTable = my datatable
var oData = oTable.fnGetData(nTr);
if(i === -1) {
$(this).addClass('row_selected');
//THIS IS WHERE I AM GETTING A LITTLE LOST
//I WANT THE VALUE OF response.details TO BE STORED IN nDetailsRow
//oData.url is a mDataProp stored in the datatable row that contains the PHP link (this works okay)
var nDetailsRow = $.get(oData.url, function(response) {
try{
eval(response);
delete response;
//I don't really understand exactly what this is doing... but response.details is what I want to display from PHP
oTable.fnOpen(nTr, req.details, 'details');
}catch(e){
// error
}
});
//THIS LINE DOES NOT WORK CORRECTLY BECAUSE nDetailsRow IS NOT WHAT I WANT IT TO BE
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
else {
...
}
}
</script>
PHP:
var req = { details : '<?php echo str_replace('%', '\\x', urlencode('
<div class="innerDetails">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tr>
<td>Test Cell:</td>
<td>This is a test</td>
</tr>
</table>
</div>')); ?>' };