error when adding scrolling - no method 'outerWidth'

jduff

When add the the 3 scroll attributes to the dataTable I get the following error: "TypeError: Object # has no method 'outerWidth'". I'm using Chrome and DataTables 1.7.6 (same error with 1.8). Without the scrolling attributes the table and data display fine.

[code]
$('#dataDisplay').html('');
$('#dataDetailTable').dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"aaData": jsonResult.jsonData.dataLines.detailData,
"aoColumns": jsonResult.jsonData.dataLines.columnData
});
[/code]

allan

Can you link us to an example showing the error please?

Allan

jduff

Sorry, it is an iternal app. If it helps, the header and horizontal scroll bar do show up. The error must occur when trying to size the data rows? Again, the data displays fine when excluding the sScrollX, sScrollXInner & bScrollCollapse attributes.

allan

I can only guess that the number of columns in your aoColumns and your aaData sub-arrays don't match, as I've not encountered this particular issue before. Modifying this example do to scrolling seems to work okay: http://datatables.net/examples/data_sources/js_array.html . If it's not that, then I think I would need to see it in action - sorry.

Allan

jduff

If it displays fine when removing the scrolling attributes then does that rule out the column size mismatch?

What does the javascript need "outerWidth" for? Looking through the Datatable javascript I see this in several places but don't have a good understanding of what it is doing.

allan

Yes - that would suggest that the table is okay, if with works that way. outerWidth is a jQuery function which is used to get the width + padding + border of an element (i.e. not just the width, but the total width of the element), so it quite useful for some of the calculations DataTables does.

I'm afraid that I would need to be able to reproduce the issue myself in order to be able to fix the issue, since i'm not sure what is causing it at the moment. If you are able to put together a small sample which shows the error, that would be very useful.

Allan

jduff

I dug a little deeper and discovered that the error is occuring at line #5454 of jquery.dataTables.js (1.7.6). Here is the snippet:
[code]
/* When x-scrolling both ways, fix the table at it's current size, without adjusting */
n.style.width = _fnStringToCss( $(n).outerWidth() );
[/code]

The item in question ("n") is an HTMLTableElement and does not have an "outerWidth" function.

Thoughts?

jduff

Looking even further, it appears that this property is only supported in Firefox, according to this page: http://wwwht.w3schools.com/jsref/prop_win_outerheight.asp - "The outerHeight and outerWidth properties only works in Firefox."

Really? Has anyone implemented scrolling in a non-Firefox browser?

allan

As I mentioned, $().outerWidth() is a jQuery function: http://api.jquery.com/outerWidth/ , so it is fine on all browsers (that Firefox have a native function is good for speed in Firefox). So the question is, why in the case above is $(n).outerWidth() claiming not to be a function. Could you add 'console.log(n)' just before that line and see what that element is?

Allan

jduff

this is the "n" element in question:
[code]



Starting Row
REC_TYP
FIRM_ID
FUND_ID
FUND_DESCRIPTION
TA_TRANS_CODE
CANCEL_IND
FUND_PERCENTAGE
GROSS TRANSACTION AMOUNT
TA_TRANS_STATUS
TRADE DATE
POLICY_NUMBER
PRODUCT_CODE
REP NUMBER
REP NAME
ADDRESS_LINE
CITY
ZIP_CODE
STATE
PERCENT_SHARE
DCA_IND




10
2
1111
1234
abcd
abcd
S
0.0
101.01
O
1234567
1234567
02
1234567
John Doe
123 First Street
Somewhere
12345
ZZ
100




[/code]

allan

Okay good - so it's a node. However, I completely don't understand why that would not work with the $().outerWidth() function - it should!

I'm really not sure what else I can suggest without being able to reproduce the problem. Checking you don't have any trailing commas in your aoColumns and aaData arrays I guess, and that all the columns are the right length (21 from your table above).

Allan

jduff

Ok, after struggling with this a bit more I brought in another pair of eyes. Though I am including the jquery 1.5.2 library, this was being overriden by another plugin I was including which was 1.2.2. The functions in question do not exist in 1.2.2 hence the error. After removing the old jquery library, all is well. Thanks.