bug: Unable to set value of the property '0': object is null or undefined

mzNextstep

trying to use DataTables on some premade tables and I get this error during loading. It's pointing to line 1830 in the un-minified nightly code:
[code]aLayout[i+k][iColShifted+l] = {
"cell": nCell,
"unique": bUnique
};
[/code]

when i run the debugger plugin, it only says that jquery isn't loaded, which is obviously untrue. I believe that is failing due to some complicated iframe legacy code nonsense, but probably unrelated to the issue at hand.

my table is a little complicated, but really not that bad:
[code]


~Outcomes~
~Goals~


~Problems~



Add New ~Problem~

Reorder ~Problems~






Stuttering


Edit





i dunno


Edit





anotehr one


Edit









Total ~Goals~ linked: 





















'A better person



♦ ♦  Another Laurie Goal






















live happily ever after



♦ ♦  be a hero





















[/code]

with the following css (just so you can see it as I do)
[code].scrollDiv {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: scroll;
}

table,tr {
border-style: none;
}

#grid {
width: 100%;
border:3px solid #901712;
background-color:white;
table-layout:fixed;
}

.gridCells {
border-style: solid;
border-color: #333333;
border-top-width: 1px;
border-bottom-width:0px;
border-left-width: 1px;
border-right-width: 0px;
margin: 0px;
}

.innerGridCells {
border-style: solid;
border-color: #333333;
border-top-width: 1px;
border-bottom-width:0px;
border-left-width: 1px;
border-right-width: 0px;
padding: 0px;
}

.normal {
border-style: none;
border-width: 0px;
padding: 0px;
}

div {
scrollbar-face-color : #CCCCCC;
}

li {
padding-top:1px;
}

.hide {
display:none;
}

.hiddenText {
border: 0px none;
background-color: transparent;
font-style:normal;
color:black;
font-weight: bold;
text-align: center;
width: 100%;
padding: 0px;
}

.programSelection {
border-top:3px solid #901712;
border-left:3px solid #901712;
border-right:3px solid #901712;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
}

.programSelect {
display:inline;
}

.problemBox {
background-image: url(images/questionMark.gif);
}

.deferred {
background-color: #E9E9E9;
}[/code]

mzNextstep

Please? Comments, fixes, questions? I'd really like to use this framework, but I obviously can't if this issue doesn't get fixed.

allan

Can you link us to a page showing the problem please? My guess is that you've not got a unique header cell for each column in the table - specifically the colspan in your header. DataTables must be given a unique cell for each column so it knows how many columns there are.

Allan

mzNextstep

Thank you! Your guess appears to be right on - if I make the header rows the same as the body, everything seems to work just fine. Of course, I don't really want to change the header. Also, I can't easily give you a link to a live site, as this is just one page in a fairly large private application, and ripping that page out would take quite a while.

What I'm confused about now is that my table seems to be functionally identical to the table used in the example here: http://datatables.net/release-datatables/examples/advanced_init/complex_header.html with a few differences in the footer. Both have two rowspan:2 cells followed by a colspan:3, and then 3 normal cells under it. When I try to use the same aoColumnDefs attr in my code, I just get that same error- Unable to set value of the property '0': object is null or undefined, and I don't see any other changes on that page that might make it work any differently (and even that bit of code, if I understand correctly, isn't meant to fix this issue, just hide a column). Is there any way you (or anyone) could explain why it works in the example, but not for me?

allan

Yes - the reason the example works is that it has a unique cell for each column, where as your own example doesn't. For example:

[code]
-- Unique cells

+===+===+===+
| | | |
+===+===+===+
| | | |
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+


-- Not unique cells

+===+===+===+
| |
+===+===+===+
| | | |
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+
[/code]

So DataTables can't tell in your example what the columns are. I really want to find a way to relax that constraint in future, but at the moment the problem is that it would break sorting and filtering since there is no way to uniquely address the column to fire those events.

Allan

mzNextstep

Thank you again for your response, but I'm afraid I still don't really see what the difference is. Based on the picture you drew, it seems like you're saying that the table can't have any columns with colspan > 1, or at least not in the first row of the header... but that's exactly what the example has.

So, if the problem is the colspan, how does the example get around it?

allan

It does have colspans - but for each column that is using a colspan, it has a unique cell. For example:

[code]
-- Doesn't work

+===+===+===+
| |
+===+===+===+
| | | |
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+


-- Works

+===+===+===+
| |
+===+===+===+
| | | |
+===+===+===+
| | | |
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+
[/code]

(where === indicates a header cell)

Allan

mzNextstep

But isn't that what I have? To use your pictures, this is what I believe my table and the table in the example both look like:

[code]
+===+===+===+===+===+
| | | |
+ + +===+===+===+
| | | | | |
+===+===+===+===+===+
| | | | | |
+---+---+---+---+---+
| | | | | |
+---+---+---+---+---+
...etc, with different footers
[/code]

What am I missing? Are they not the same?

allan

You are correct - that should work. I've broken your example down into some simpler HTML so I can actually see what is going on here: http://live.datatables.net/uwebip/edit#javascript,html and yes, that is most certainly broken. I'll need to look into it and see what is going on.

Good timing as I was itching to pull the trigger on 1.9.4 - but certainly won't until this is fix.

Allan

mzNextstep

Thanks so much!

allan

Worked it out :-). So the issue was that you had TD elements in the header - that shouldn't have been a problem, since as of DataTables 1.8 TD elements have been allowed in the header, but there was a bug here, whereby if only TD elements were being used, then it wasn't being correctly detected and DataTables generated its own, incorrect header (getting mixed up between the two, resulting in the JS error you saw).

I've just committed a fix for this and you'll be able to see this example working now:
http://live.datatables.net/uwebip/edit#javascript,html

The 1.9.4.dev version of DataTables with this fix is available on the downloads page ( http://datatables.net/download ) and 1.9.4 final will be released soon.

Thanks for flagging this up!

Regards,
Allan

mzNextstep

Beautiful... nightly works perfectly. Thanks again!