internet explorer Warning - added data does not match known column length

abraam

Hallo Allan
i realized that one of my pages with datatables does not work in internet explorer (6,7,8).
When the page loads a small warning appears with an error bip. the message is
"Warning - added data does not match known column length"

When i click OK it appears instantly for 10 times and then datatables shows an empty table.
If i change the number of rows from default 10 to 15 i get the same error message 25 times.
With firefox everything is ok. the page is at http://www.thelwnamathw.gr/vaseis and my code is
[code] iDelay = (iDelay && (/^[0-9]+$/.test(iDelay))) ? iDelay : 250;

var $this = this, oTimerId;

// Unfortunately there is no nFilter inside oSettings.
var anControl = $( \'div.dataTables_filter input:text\' );

anControl.unbind( \'keyup\' ).bind( \'keyup\', function() {

var $$this = $this;
window.clearTimeout(oTimerId);

oTimerId = window.setTimeout(function() {

$$this.fnFilter( anControl.val() );
}, iDelay);
});

return this;
}


$(document).ready(function() {
goTable = $(\'#example\').dataTable( {
"oLanguage": {
"sProcessing": "???????????...",
"sLengthMenu": "????? _MENU_ ????????",
"sZeroRecords": "??? ???????? ???????? ??? ?? ??????????",
"sInfo": "?????????? _START_ ??? _END_ ??? _TOTAL_ ????????",
"sInfoEmpty": "?????????? 0 ??? 0 ??? 0 ????????",
"sInfoFiltered": "(?????????????? ??? _MAX_ ???????? ????????)",
"sInfoPostFix": "",
"sSearch": "?????????:",
"sUrl": "",
"oPaginate": { "sFirst": "?????", "sPrevious": "???????????", "sNext": "???????", "sLast": "?????????" }},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://www.thelwnamathw.gr/controllers/server_processing.php",
"bSortClasses": false,
"aoColumns": [ null, { "bSearchable": false }, { "bSearchable": false }, { "bSearchable": false } ]
} ) .fnSetFilteringDelay(500);
} );









?????
????2008
??????
????????


';
}
}

[/code] questionmarks should be greek characters.

Any suggestions?

allan

Hi abraam,

What this error means is that there is an unexpected number of columns in a data row, and it doesn't match the column number detected in the header and/or that passed by aoColumns. It looks like your aoColumns matches the header, so it's not that. Therefore I suspect that your TR elements don't contain 4 TD's, or there is invalid HTML in there somewhere. The alert will show up once for every row that you try to add which is incorrect in length.

Hope this helps,
Allan

abraam

i found some other topic about a trailing comma and solved this problem (at least with ie6)
i had this code in server_processing.php

[code] while ( $aRow = mysql_fetch_array( $rResult ) )
{
$sOutput .= "[";
$sOutput .= '"'.addslashes($aRow['sxoli']).'",';
$sOutput .= '"'.addslashes($aRow['v2008']).'",';
$sOutput .= '"'.addslashes($aRow['image']).'",';
$sOutput .= '"'.addslashes($aRow['imagediff']).'",';
$sOutput .= "],";
}
$sOutput = substr_replace( $sOutput, "", -1 );
$sOutput .= '] }';

echo $sOutput;[/code]
and changed a comma in the last row

[code] $sOutput .= '"'.addslashes($aRow['imagediff']).'"';
$sOutput .= "],";
[/code]
Allan, some times just asking somewhere about your problem makes it easier some how!
thanks for your time

allan

Ah yes, the old trailing comma in IE. Personally I say that the IE handling is actually correct, and that Firefox etc should reject the trailing comma as it isn't a valid JSON object :-).

This is a great site for testing JSON btw: www.jsonlint.com

Regards,
Allan

shameless

Hmmm... any ideas as to what could elicit the "DataTables warning: Added data does not match known number of columns" alert when the table headers and the JSON array DO match?

[code]


BUY Orders--FILLED








Quantity

Origin

Date

Filled

Date

Bid

Partial?

Trans

InZIP

Expires




[/code]

...and the JSON data validated per http://www.jsonlint.com/....

[code]
{
"aaData": [
[
"4",
"",
"1000",
"December 22, 2009 - 03:27 PM",
"December 22, 2009 - 03:27 PM",
"0.19",
"Yes",
"4",
"75063",
"December 29, 2009 - 03:27 PM"
]
]
}
[/code]

10 columns are expected and 10 values are in a row. I am befuddled.

EDIT #1: If the first column is made invisible, would that affect the "number of columns" comparison? I am making the first column (an 'id' column) invisible at initialization thus:
[code]
{ "bVisible": false }
[/code]

EDIT #2: "You sent a payment of $100.00 USD to Allan Jardine" -- Alan, I read in one of these comments that it might be possible to elevate an issue via PayPal. Hope you find this sufficiently elevating.

allan

Hi shameless,

Thanks very much for your donation :-). What I suspect is happening here is that the aoColumns array doesn't have 10 elements in it. You've got 10 TH elements which all look good, and 10 array elements in the JSON return, which only leaves aoColumns. You must be using it if you are using bVisible:false, so if you could check that array (using 'null's where needed, for columns that don't have any special parameters needing set, that would be the place to start.

One more thing - does this happen in IE and Firefox. If it's just IE, look for a trailing comma in the JSON data arrays or aoColumns. If it's both - hopefully the first paragraph will get it sorted!

Hope this helps,
Allan

jrivera

This is somewhat related as I've noticed that if I change the number of columns in the HTML or JSON after it has already run in the browser and then refresh, it seems to cache the older information and displays that error. I have to clear the cache and start private browsing mode to eliminate the false warning.

allan

One method to over come this is to use POST rather than GET (assuming it's an IE caching issue you are running into): http://datatables.net/examples/server_side/post.html . fnServerData works for both server-side processing and Ajax sourced files.

Regards,
Allan

shameless

Thanks, Alan. That was indeed the issue.

These rows that are created have to have events bound to them or we have to use the "live" function again if we want to do something like:

http://datatables.net/1.5-beta/examples/server_side/row_details.html

...while using an ajax load, correct?

allan

Yes - using $.live() is probably the best way to go to be honest. Although you can use fnInitComplete ( http://datatables.net/usage/columns#fnInitComplete ) which is called once the JSON data is loaded. Then you could just you regular events (along with fnGetNodes - to get all TRs!)

Regards,
Allan

shameless

Alan,

I have yet to be able to wrap my head around "fnGetNodes". I had altered my strategy to using "fnOpen" because it seemed more straight-forward than the approach in http://datatables.net/1.5-beta/examples/server_side/row_details.html.

Now what I am seeing is that my "new" row (i.e. "Temporary row opened") is added to the dataTable using the code following, but then the original ajax-loaded row that first added the "new" row "stops working" and the "new" row then the "new" row gets assigned the function and will keeping adding "Temporary row opened" below the first ""Temporary row opened".

The "oTable[arPos]" construct is necessary because I am using dataTables on the Tab control...and it works. Might be a better way to do it, but it works.

Anyway, do you have any idea why this seems to work great the first time and then goes wonky thereafter?

[code]
$('.ordrstat tr').live("click", function(){
var sid = $(this).parents('table').attr('id');
var arPos = jQuery.inArray(sid, trackTabs);
var iPos = oTable[arPos].fnGetPosition(this);

if ($(this).hasClass('info_row')){
alert('has class');
oTable[arPos].fnClose(this);
}else{
oTable[arPos].fnOpen( this, "Temporary row opened", "info_row" );
}
});

[/code]

EDIT #1: I am using "alert(this.className);" and discovering that the new row has no class associated with it. I have tried passing both "info_row" and ".info_row" as the class parameter. No diff.

EDIT #2: Evolving the strategy further....

[code]
var detailNode;
var curDataTable;

$('#rwDetail tr').live("click", function(){
curDataTable.fnClose(detailNode);
alert('rwDetail');
});

$('.ordrstat tr').live("click", function(){
var sid = $(this).parents('table').attr('id');
var arPos = jQuery.inArray(sid, trackTabs);
curDataTable = oTable[arPos];

var newRw = "Temporary row opened new";
detailNode = curDataTable.fnOpen( this, newRw, "info_row" );

});
[/code]

Borrowing from your "details" approach here, obviously.

The table is added and the alert('rwDetail') is displayed, but the row / table is not deleted from the original datatable.

EDIT #3: "detailNode" is "undefined" , but "fnOpen" is supposed to return the node that is added, correct?

allan

fnGetNodes will simply return an array of all TR nodes in the table. You can then use this to do normal DOM processing.

However, looking at the fnOpen code - yes fnOpen should return the newly created TR element (but this was new in 1.6.1 I think - are you using the latest version?).

However, I think there is a slight misunderstanding of fnClose - you are passing it the created row - but in fact is it expecting the same TR element that was 'opened'. It is possible to use the internal information to map the details element to the 'parent' (oSettings.aoOpenRows[i].nParent) if you wanted, but I'd suggest simply having a 'toggle' on the element, much as I have in the demos.

http://datatables.net/examples/api/row_details.html
http://datatables.net/examples/server_side/row_details.html (this one should probably be updated to $.live...)

Regards,
Allan

shameless

Alan,

Mind if I ask why the examples use "parentNode" and not "parent()".

I mean, other than the fact that when I get a reference via "parent()" and pass it to "fnClose" it fails. :)

Shameless

shameless

Okay, I get that the "parent" is the row that "spawned" the "detail row" and not the detail row itself.

However, when I get a JQuery reference to precisely that "parent" / "spawing" row and pass it to "fnClose", nothing works.

And when I try using "parentNode" to get the reference, that does not seem to work, either. In the code below, I kept adding ".parentNode" behind the "this" reference hoping that I would eventually find the magic pointer to the "spawing" row, but no level seems to work.
[code]
$('#rwDetail tr').live("click", function(){
var nTr = this.parentNode.parentNode.parentNode.parentNode.parentNode;
curDataTable.fnClose(nTr);
});
[/code]

I am sorry that I am being so dense about this, but I feel that I am missing something fundamental. I keep searching the dox and forums, but I am running out of experiments to try.

allan

Hi Shameless,

My examples use parentNode because it's a lot quicker than calling $().parent, when I've not the node. However, it doesn't provide nearly the same flexibility, and when you have a lot of parentNode's, like you your example above, it quickly becomes unwieldy and sensitive to code change. If it's more than one parentNode, then I'd tend to use jQuery.

So what you want to do is be able to click on the 'details' row to hide it. I think $().prev() is what you are looking for ( http://api.jquery.com/prev/ ), although I've not actually used it myself.

[code]
$('#rwDetail tr').live("click", function(){
curDataTable.fnClose( $(this).prev()[0] );
});
[/code]
This _might_ do the trick...

Regards,
Allan

shameless

Alan,

Please do not think that I am persisting in this to be a pest, but I am seeing some stuff that looks "buggy".

Okay, first the code:

[code]
$('#rwDetail tr').live("click", function(){
alert('here');
var nTR = $(this).parents('.info_row').parents('tr').prev();
alert(nTR.html());
curDataTable.fnClose(nTR);
// alert(curDataTable.html());

});

$('.ordrstat tr').live("click", function(){
$("#status").html("retrieving data.");
var sid = $(this).parents('table').attr('id');
var arPos = jQuery.inArray(sid, trackTabs);
curDataTable = oTable[arPos];

detailNodePos = oTable[arPos].fnGetPosition(this);

var newRw = "Temporary row opened new";
var newNode = curDataTable.fnOpen( this, newRw, "info_row" );
parentNode = newNode.parent().parent();
});

[/code]

Now, some screenshots...this is the DataTable after initialization...everything looks fine:



Here is the "spawned" / "detail" node:



Now, when I click on the "detail" node to close it, the code above identifies the "spawning" / "parent" node. We can prove that we are finding the correct node by displaying its HTML. Here's the pic:



Obviously I am finding the correct node, but when I pass it to "curDataTable.fnClose(nTR);" then it does not close.

Just for grins, I also retrieved the HTML of the entire DataTable object as it was doing this that helped me clarify a uniform way to find my "parent" row node. It also proves that I have a "correct" reference to the DataTable and that "fnClose" should work.

[code]
caption>BUY Orders--FILLED

QuantityOrigin
DateFilled
DateBidPartial?TransInZIPExpires


1000
December 22, 2009 - 03:27 PM
December 22, 2009 - 03:27 PM
0.19
Yes
4
75063
December 29, 2009 - 03:27 PM
Temporary row opened new

[/code]

One bit of oddness that I notice here is that"fnOpen" seems to add a superfulous "" at the new row's end. Don't know if that is inhibiting "fnClose" or not.

I do appreciate you helpful hint re: "prev()" but I can find get numerous references to the "parent" node, verify them as above, and pass them all to "fnClose" with no effect.

Regards,

Shameless

allan

If I put the following code into my demo page ( http://datatables.net/examples/api/row_details.html ) then it works great for closing the row (with the proviso that it doesn't update the icon - but that's trivial to add):

[code]
$('td.details').live( 'click', function () {
oTable.fnClose( $(this.parentNode).prev()[0] );
} );
[/code]

Does this snippet not throw and error?

[code]
parentNode = newNode.parent().parent();
[/code]
There is no parent() function for a DOM node - it's not a jQuery instance that fnOpen is returning. Also fnOpen doesn't add 'table' tags at all - unless it is asked to. I don't know why they would be being put in. All that fnopen does is create a new TR, a new TD, and append them to the table, with the innerHTML that is given to it.

If you console.log( nTR ); just before you call fnClose, in Firebug when you hover over the printed element, does it highlight the row that needs to passed to fnClose. fnOpen and fnClose certainly should work, as shown in the demo.

Allan

shameless

I just tried:

oTable.fnClose( $(this.parentNode).prev()[0] );

...and it does not work for me.

Would you mind terribly if I back-channeled the site and login information to you, out of this thread?

allan

Please do - although I'm away this weekend, so I'm not going to be able to help for a little while - sorry. http://datatables.net/contact .

Did you get anything useful from the console.log?

Allan

shameless

Alan,

If I change

parentNode = newNode.parent().parent();


...to...

parentNode = newNode.parentNode;
alert(parentNode);

...then I get:

[object HTMLTableSectionElement]

I am going to install and learn some FireBug now. Have a good weekend.

allan

Hi shameless,

Did you have any luck with that? TableSectionElement looks like a good starting point. Firebug will help even more :-)

Allan

shameless

SOLVED

****************************************************************************
dUH. i guess IE would have problems with any JSON-like construct that ended with a comma and not just JSON returned as "aaData". Should be:
[code]
/* Expires*/null
[/code]
****************************************************************************

Alan,

Let me first say "thank you" for the impetus to finally install and "learn" Firebug. It has proved invaluable already.

I found and corrected the initial version of this error.

Now I have a variation working in FF, but failing in IE. There is no "trailing comma" and the JSON validates:
[code]
{
"aaData": [
[
"6",
"100",
"February 19, 2010 - 12:58 PM",
"1.00",
"Yes",
"71957",
"February 26, 2010 - 12:58 PM"
]
]
}
[/code]

...and...

[code]

"aoColumns": [
/* id */ null,
/* Quantity*/null,
/* Origin Date*/null,
/* Bid*/null,
/* Partial*/null,
/* InZIP*/null,
/* Expires*/null,
]
[/code]

...and lastly...

[code]
idQuantityOrigin
DateBidPartial?InZIPExpires
[/code]

...and the number of columns in the table and aoColumns also corresponds.

As I said, it appears to work perfectly in FF, but not IE. What else could be wrong other than a trailing comma?

Regards,

Shameless

p.s. Hope that your weekend off was pleasant enough.

tkn

Try to Remove the comma at end
.../* Expires*/null,<--

[code]
"aoColumns": [
/* id */ null,
/* Quantity*/null,
/* Origin Date*/null,
/* Bid*/null,
/* Partial*/null,
/* InZIP*/null,
/* Expires*/null
]
[/code]