Question

I am trying to duplicate this functionality: http://datatables.net/release-datatables/examples/api/row_details.html

The example provides this function:

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';

    return sOut;
}

I have changed this function to be like so:

/* Formating function for row details */
function fnFormatDetails(oTable, nTr) {
    var aData = oTable.fnGetData(nTr);
    var sOut = jQuery.ajax({
        url: "ajax/order_history_orderlines.asp",
        type: 'post',
        data: { orderid: aData[1] },
        context: document.body
    });

    return sOut;
}

When debugging this through FireBug, I see the ajax response does everything correctly. The request is made, it succeeds, the correct information is being returned. Here is what is being returned:

<!-- Teplate for orderlines found in rs Record Set -->
<table cellpadding="5" cellspacing="0" border="0" style="padding-left: 50px;">

    <tr>
        <td>
            Quantity:
        </td>
        <td>
            1
        </td>
        <td>
            Description:
        </td>
        <td>
            48 Cans of drink
        </td>

        </tr>

</table>

However when I click the [+] button it expands the row, but the ‘details’ row never gets updated with the table that is returned from the ajax request.

When I use everything from the example and sOut = <table> etc it works. When I switch it to grab the ajax request it stop working with 0 errors.

Can anyone see what I am missing here?

Answer 1

Your code here is incorrect:

var sOut = jQuery.ajax({
    url: "ajax/order_history_orderlines.asp",
    type: 'post',
    data: { orderid: aData[1] },
    context: document.body
});

jQuery.ajax() does not return data, it return the jqXHR object. You need to use the success callback functionality to populate data on a successful ajax call.

var sOut = jQuery.ajax({
    url: "ajax/order_history_orderlines.asp",
    type: 'post',
    data: { orderid: aData[1] },
    context: document.body,
    success: function(data, textStatus, jqXHR)
    {
      // do something with data(json object returned by call)
    }
});