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