"'style' is null or not object error" with scrollableDataTab

[gmacmullin]

Hi,

We recently upgraded to richfaces 3.2.2 GA from 3.2.0 SR1 and we're now getting some Javascript errors in IE 7 (everything works in FireFox). The errors occur on a page with about 10 scrollableDataTables shown in numerous modal panels.

When the page is first loaded, 5 "'style' is null or not object error" occur and in one of the scrollableDataTables, I can't select anything. To help debug this problem I installed Companion.JS (http://www.my-debugbar.com/wiki/CompanionJS/HomePage) and it gives 3 errors when loading the page:
1. Syntax error (line 491) (controls-scrollable-data-table.js.jsf)
2. style' is null or not object error (line 491) (controls-scrollable-data-table.js.jsf)
3. Syntax error (line 491) (controls-scrollable-data-table.js.jsf)

So it looks like the following may be causing the problem:

columns[j] = {
columnId: ids[ i ],
styleClass: cell.className,
id: cell.id,
align: cell.align,
valign: cell.vAlign,
title: cell.title,
minWidth: 10,
frozen: false,
fixedWidth: Validators.getBoolean(cell.getAttribute("fixedWidth"), false),
sortable: Validators.getBoolean(cell.getAttribute("sortable"), false),
sorted: null,
style : Utils.getRule("#"+ this.normalizedId + " .dr-sdt-c-" + (( i < count - 1 ) ? j : "f")).style
};

The last line ( with the Utils.getRule() call) is new between richfaces 3.2.0 SR1 and 3.2.2 GA. It appears to read CSS rules from all stylesheets on the page. I'm not sure if this is the problem, but I think it's looking for the following styles:
<!--
#panelForm_dialogavailableItems .dr-sdt-c-0 {width: 200px;}#panelForm_dialogavailableItems .dr-sdt-c-f {width: 0px;}
-->

The above style declaration is generated by the server and has the styles commented out. In FireFox, the generated source has the styles commented out as well, but in IE7, some of the styles are commented out and some are not. As it turns out, 5 style declarations are uncommented out and 5 are commented out. So I'm not sure what's supposed to happen.

Has anyone else come across the same problem or know a work around? Perhaps there's something I'm not configuring for the scrollableDataTables.

Thanks

[konstantin.mishin]

This problem related with Internet Explorer.
It doesn't evaluate any more than 30 style elements.

[gmacmullin]

Is it possible for richfaces to externalize these styles in a style sheet file?

[gmacmullin]

So it looks like it is an IE problem, where it can only load 30 style tags or style sheet links. I think this is a problem for anyone creating a large page (i.e. a page with lots of richfaces components).

To get around this problem, I've create a custom renderer for the ScrollableDataTable, that overrides the renderStyle() method - it now stores the contents of the style tags in a buffer, that is rendered in a JSP. So now my template includes a link to the generated CSS JSP containing the styles generated by each scrollable data table.

So that fixed my original javascript errors, now I have new ones. In IE 6, and sometimes IE 7 (don't know why it sometimes seems to work). Now, when I load the page, no javascript errors occur. When I open a modal dialog panel containing a scrollableDataTable, I get an "Line 1036. Unspecified error." when I try I add an item into an empty scrollableDataTable.

Using the Microsoft Script Debugger, I tracked the problem down to line 232 in GridBody.js:
this.scrollBox.element.scrollTop = scrollTop;

It appears that this.scrollBox.element.scrollTop has not been defined, and when an assignment is attempted, it throws the above error.

Is this a problem with the javascript or that it's an empty scrollableDataTable? Does anyone have any ideas?

Thanks,
Glen

[konstantin.mishin]

https://jira.jboss.org/jira/browse/RF-5009