dataTables "Uncaught TypeError: Cannot read property 'nTr' of undefined"

Question

So, this is the code I have in a post-submit callback from a form using ajaxForm:

function UpdateFormFinished(response, statusText, xhr, $form) {

    if (response['bResult'] == true) {

        var sTestType = $("#sTestType").val();
        var sTableId = "";

        for (index in response) {

            if (typeof response[index] !== "function" && index != "bResult" && index != "sResult") {

                aRowIdPieces = index.split("_");
                sChar = aRowIdPieces[1];

                iColumn = $("#" + index).prevUntil(index).length;
                sTableId = $("#" + sTestType + "_" + sChar).parent().parent().attr("id");

                oTable = $("#" + sTableId).dataTable();
                oTable.fnUpdate(response[index], $("#ixDataTable").val(), iColumn);
            }
        }
    }

    alert(response['sResult']);

    $("#dialog_test_details").dialog("close");
}

The first line after the if retrieves a value from a hidden input in the form itself. The variable "index" will have a value of "someWord_X", where "X" is an integer. iColumn stores the index of the column/cell I want to update (I am aware the numbering starts at zero, which means that prevUntil returns the index of the column/cell I want to update). Finally, "ixDataTable" is another hidden input on the form and returns an integer (I have verified this using console.log to output that value).

So, from everything I can see, I am passing good values in to fnUpdate, but I am getting the error "Cannot read property 'nTr' of undefined". I have looked at the stack trace and the problem starts at line 6188 in dataTables (v1.9.4), which is this line:

_fnGetTdNodes( oSettings, iRow )[iColumn].innerHTML = sDisplay;

The stack trace proceeds to line 4661 and I have copied lines 4660 to 4689 here:

            oData = oSettings.aoData[iRow];
            if ( oData.nTr !== null )
            {
                /* get the TD child nodes - taking into account text etc nodes */
                anTds = [];
                nTd = oData.nTr.firstChild;
                while ( nTd )
                {
                    sNodeName = nTd.nodeName.toLowerCase();
                    if ( sNodeName == 'td' || sNodeName == 'th' )
                    {
                        anTds.push( nTd );
                    }
                    nTd = nTd.nextSibling;
                }

                iCorrector = 0;
                for ( iColumn=0, iColumns=oSettings.aoColumns.length ; iColumn<iColumns ; iColumn++ )
                {
                    if ( oSettings.aoColumns[iColumn].bVisible )
                    {
                        anReturn.push( anTds[iColumn-iCorrector] );
                    }
                    else
                    {
                        anReturn.push( oData._anHidden[iColumn] );
                        iCorrector++;
                    }
                }
            }

Any suggestions for how to fix this are greatly appreciated and will be attempted. I have verified the table id is correct and I have also tried incrementing the column index by 1 and neither of these things has had a positive impact. I have also tried passing in:

ixDataTable = sTestType + "_" + sChar;

as the second argument for fnUpdate, but it did not like receiving the id of the row to be updated, either.

Thank you in advance and hopefully it is a very simple fix.

Answer 1

I discovered the problem and it is here:

oTable.fnUpdate(response[index], $("#ixDataTable").val(), iColumn);

Specifically, it is with the value of $("#ixDataTable").val() because this evaluates to a string. So, I actually have to write the code like this:

oTable.fnUpdate(response[index], parseInt($("#ixDataTable").val()), iColumn);

Hope this helps others who might be encountering this and cannot understand why.

Answer 2

Since this recited code seems to be outdated, I have another possible bugfix for anyone experiencing this problem. This behaviour simply occurs whenever you define within the options:

"pageLength": "30" //bad

instead of

"pageLength": 30 //good

DataTables interprets this as 030 for its internal counters, which leads to this error.