DataTables -> Ajax not working

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?

@jeschafe I'm not sure what part of putting them are you asking about. The DataTables example the function returns sOut which then is supposed to populate the <td class="details"> with the return from sOut. If you're asking what the response from the Ajax request it is currently above see the code block of . — James Wilson
– James Wilson, Commented Jun 8, 2012 at 17:08
Right, I was getting to the point that @Erik philips made below. In your first function above it's just setting a string literal to insert as html. When you do ajax it has to be formatted the same, but you insert the data returned on the callback, not the actual ajax object. — jeschafe
– jeschafe, Commented Jun 8, 2012 at 17:19

Erik Philips · Accepted Answer · 2012-06-08 17:10:25Z

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)
    }
});

answered Jun 8, 2012 at 17:10

Erik Philips

54.9k11 gold badges133 silver badges158 bronze badges

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

3 Comments

James Wilson Over a year ago

I had a feeling the data returned might not be a string. Even tried .ToString(); and it populated it with [object, object]. I'm pretty new with Jquery, not brand new, but still a beginner. Is there a page reference or some starter code you might have on hand that could help me understand how to break out the data into a table structure? Because what sOut needs to look like is the table above in the original post. I'm just not sure how to start the process of yanking out the data from the ajax response and chucking it into a table.

James Wilson Over a year ago

So playing around with it. I changed sOut to be oAjaxData and I set sOut to be sOut = data.toString(); inside the success:. What is VERY strange is. I load the page and the same thing happens it returns a blank row. However when I use FireBug to step through it, it populates the rows correctly... What the heck am I doing wrong here so confused by this behavior.

James Wilson Over a year ago

Well your solution lead me on the right path. I had to change the original function another suggested on the DataTables forum. With your suggestion and his change it now works perfectly! :)

Collectives™ on Stack Overflow

DataTables -> Ajax not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related