Details
-
Type: Bug
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: EE-3.3.0.GA_P02
-
Fix Version/s: EE-4.0.0.GA, EE-3.3.0.GA_P03, 4.1
-
Component/s: ACE-Components, Sample Apps
-
Labels:None
-
Environment:ICEfaces4 trunk r. 43281
Browsers: IE8
Server: Tomcat7.0.42 (configured for SSL access)
-
Assignee Priority:P2
-
Support Case References:https://icesoft.my.salesforce.com/5007000000tgYuT support case 13157
Description
On the Pin Columns demo accessed using the SSL config, a JS error occurs when pinning columns:
Message: 'JSON' is undefined
Line: 88
Char: 58
Code: 0
URI: https://10.18.39.149:8443/showcase/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=4_0_0_141029
2) showcase > ace:tableConfigPanel (non-SSL, IE8):
On the Overview and Advanced demos, a similar JS error occurs when saving changes in the Table Config panel, or when leaving the demo pages;
afterwards browser window must be re-opened to be able to access other demos:
Message: 'JSON' is undefined
Line: 11
Char: 283
Code: 0
URI: http://10.18.39.149:8080/showcase/javax.faces.resource/util/ace-core.js.jsf?ln=icefaces.ace&v=4_0_0_141029
-
- afterFix.PNG
- 27 kB
-
- beforeFix.PNG
- 27 kB
-
- console.PNG
- 13 kB
-
- p01Pinning.PNG
- 20 kB
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
I just couldn't reproduce these issues using both the 3.3 and 4.0 codebases. I tested on a real IE8 and on IE11 in compatibility mode for IE8, with SSL and without SSL. However, by examining the code and the error messages posted above, I could have a clue of what the problem might be. The error is thrown because the global JSON object happens to be undefined on IE8 when using ICEfaces. The cause of this issue seems to be that we load a custom implementation of the JSON object (borrowed from YUI) that is not properly overriding the native JSON object on IE8. The reason why we are using this custom implementation was to be able to use the JSON object on IE7, which doesn't have a native JSON object.
So, I made some commits to fix these issues. When I tested them, I (still) couldn't reproduce the issue, and I didn't see any new errors either. So, please test this issue again with these fixes (revision 43595 on the 3.3 EE branch and revision 43596 on the 4.0 trunk).
If you can still reproduce the errors, please provide more specific details about how to reproduce them and about the environment/configuration used, and also try to test on an isolated test app, instead of just the showcase, to see if the errors happen there too.
Also note that this issue may have been also reproducible with the ace:list and ace:tree components, which also make use of the JSON object. So, please test them as well to verify that there are no regressions.
Tested with ICEfaces ee-3.3.0 maintenance branch and ICEfaces 4 trunk r43607 on icepcvm-ie8 (10.18.39.174) using the SSL configured and a non SSL configured Tomcat 7.0.27 server on xp02.
Showcase Data Table > Pin Columns demo can not be accessed using IE 8 in IE 8 mode.
When using either configuration, and testing with IE 8, the document mode had to be set to IE 7 standards in order to launch the Data Table > Pin columns demo. When the browser was left in IE 8 standards mode the demo would not launch and caused IE to stop working. This was not the case with other Data Table demos tested with IE 8.
After setting the document standard to IE 7 mode in order to be able to use the Pin columns demo, any interaction with the demo (pinning columns) causes the following error:
Message: 'JSON' is undefined
Line: 490
Char: 42370
Code: 0
URI: https://10.18.39.120:8443/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb
Additional testing performed:
Tested QA data table pinning, and config panel test apps using non-SSL and SSL configurations, IF4 and IE 8 no errors found.
Tested QA data table pinning, and config panel test apps using non-SSL and SSL configurations, IF ee-3.3.0 maintenance branch and IE 8 no errors found.
Tested showcase ace:tree and ace:list using non-SSL and SSL configurations, IF4 and IE 8, no issues found.
Tested showcase ace:tree and ace:list using non-SSL and SSL configurations, IF ee-3.3.0 maintenance branch and IE 8, no issues found.
Was not able to reproduce issue 2.
Art, please try to reproduce using the same icepcvm-ie8 test machine.
I was able to reproduce the issue now. It is actually related to scrolling. If on the demo xhtml document you set the 'scrollable' attribute to false, then no errors occur. Something similar happens in the Scrolling demo; the browser doesn't crash, but automatically enters into compatibility view and becomes slower. So, most likely, the code that handles scrolling in the data table is doing an operation or using a syntax that isn't legal on IE 8.
I did more investigation, and it's still not clear what exactly is causing this error. Most likely it's just due to performance issues of IE8 with tables.
First of all, for the purposes of testing, I disabled all the Javascript related to the data table. This means that the table HTML markup was rendered, but the component wasn't initialized in the client. So, none of the features was enabled in the client, since no data table Javascript was executed. Even, in this no-Javascript mode, the IE8 browser kept crashing when loading the Column Pinning demo. After making certain modifications to the demo page, the browser didn't crash, but showed a tooltip mentioning that an error had occurred and that it was automatically entering in compatibility mode. This indicates that the error is caused by the HTML markup itself, not by the Javascript. The undefined object errors mentioned above are simply a side effect of resources not loading correctly when abruptly switching into compatibility mode.
I validated the HTML markup with the W3C validator and no serious errors were found (e.g. no mismatched tags). The only errors were trivial and related to entities (which happen in other tables too that don't present this error).
I made an experiment of removing all columns and just leaving the ID column. The problem didn't occur in this case (the browser didn't crash and it didn't enter into compatibility mode). I added copies of this column multiple times (removing id's to avoid duplicate id issues). With 10 copies, there was no issue. With 20x copies, the same issue occurred (automatically entered into compatiblity mode, due to an unspecified error).
When, I removed all other columns and simply left the Cost column, the error occurred again. When, I removed the $ symbol and the decimal point and the two fraction digits, the error didn't occur. When, I made a second copy of this column, with these modifications, the error did occur again.
When copying the MPG column, the error didn't occur until there were 9 copies.
All this suggest that the problem is related to performance.
Note that all of these errors didn't occur when adding staticHeaders="false" to the table, which is the feature that creates a separate table element just for the headers so that only the contents are scrollable.
It seems like using too many data table features at the same time, like scrolling, static headers, and pin columns, on IE8 leads to these issues.
Testing with EE 3.3. P02 release jars found also that DataTable > Pin Columns demo cannot be loaded in IE8 if using Document Mode: IE8; browser becomes non-responsive and crashes (SSL and non-SSL testing).
Pin Columns demo can only be loaded if using IE8 / Document Mode IE7, however when interacting with the demo, the "'JSON' is undefined" error could not be reproduced.
Testing with IF4 trunk/ EE-3.3.0-maintenance branch r.43879 on the standalone Windows XP machine with IE8:
- when using Browser Mode: IE8 / Document Mode: IE8 Standards, browser becomes unresponsive and crashes (SSL and non-SSL) when accessing DataTable > Pin Columns demo.
- when using Browser Mode: IE8 / Document Mode: Quirks, a 'JSON is undefined' error occurs when clicking to expand DataTable in showcase left-side menu:
'JSON' is undefined ace-core.js.jsf?ln=icefaces.ace&v=4_1_0_150107, line 11 character 283 - issue 2) from description could not be reproduced.
As noted before, this seems to be a performance issue when processing the HTML markup in IE8, since the error occurs even when the ace:dataTable component doesn't render any javascript (i.e. commented out lines in the renderer classes that output javascript). The error message about the JSON object is a side effect of an unknown error.
I tested the same demo markup outside of the showcase main template, and I didn't see any errors there, and the pin columns functionality worked normally. Again, this suggests that this is more of a performance issue with the page in general.
More specifically, this error seems to be more related to the scrolling functionality in ace:dataTable than to pinned columns, since a similar error occurs in the Scrolling demo, and the error wasn't present in the pinned columns demo after setting scrollable="false" in ace:dataTable.
So, since this error is only visible in the showcase application, a possible solution would be to simply set scrollable="false" to the ace:dataTable on this demo, in order to avoid this specific error on IE8.
More than a performance issue, it seems to be an issue with markup/CSS that's not supported well by IE8, and therefore it automatically enters into Compatibility View.
I tried removing all the content from the template pages (main-template.xhtml, content-template.xhtml) and left only '<ui:insert name="example"/>' to load the actual pin column demo. In this case, the browser didn't crash and the pin columns functionality worked well. I removed this content in stages to try to see what was causing the error, but every time I tried either the browser crashed or the pin columns function didn't work well or caused another error. Even when I removed all the content except for the surrounding div with the 'example' class name, the browser still entered into Compatibility View and the pin columns functionality didn't work well. The 'example' CSS class name in the show case application consists of the following settings:
.example {
float: left;
clear: left;
margin-top: -5px;
width: 100%;
}
So, something as simple as floats seem to be causing IE8 to enter into Compatibility View. I tried the '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>' meta tag, but it didn't help.
Tested with ICEfaces 4 trunk r43909 using the icepcvm-IE8 machine. Scrolling itself did not seem to present a problem but pinning did. When using the Pinning demo I was able to produce the js error by pinning one column.
Tested with ee-3.3.0 P01 libs. I was not able to reproduce the Column Pinning JSON error using the P01 libs on icepcvm-ie8 but the demo did have some pinning issues. Screen shots attached.
The issue occurs when the changes in markup forces IE8 into switching to Compatibility Mode (when clicking on 'Pin columns' link). In this mode the native JSON object is not available anymore thus causing the JS error.
Initially I observed a browser crash when clicking on 'Pin columns' link, only after I removed style="width:70%; margin:auto;" attribute from the enclosing form in dataTablePinning.xhtml I could observe the behaviour described by this issue.
Replaced 'max-height' CSS rules with 'height' for the scrollable data table content to avoid having IE8 switch to compatibility mode.
Verified ICEfaces 4 trunk r43948 using SSL and non SSL config Tomcat 7. IE 8 on 2 vms, IE 9, 10, 11.
Re-opened to have this applied to the 3.3 maintenance branch also.
Back-ported change to 3.3.0-GA branch.
There is now a difference in how the table resizes when scrollable=true. To demonstrate I changed the showcase dataTable > Paginator demo so that scrollable=true. When configuring the table to leave a small remainder of rows on the third page, the table does not snap to the smaller height. This is not the case when scrollable=false, the table does resize to accommodate the lesser height. See screen shots beforeFix.png and afterFix.png
There is now a difference in how the table resizes when scrollable=true. To demonstrate I changed the showcase dataTable > Paginator demo so that scrollable=true. When configuring the table to leave a small remainder of rows on the third page, the table does not snap to the smaller height. This is not the case when scrollable=false, the table does resize to accommodate the lesser height. See screen shots beforeFix.png and afterFix.png
I think this is an acceptable change, since when in scrollable="true" mode, having the table resize to match the number of displayed rows would be unexpected. It would be expected behaviour, however, if scrollable-="false", and testing shows that this still behaves as expected.
Verified ICEfaces ee-3.3.0 maintenance branch r43950 using SSL and non SSL config Tomcat 7. IE 8 on 2 vms, IE 9, 10, 11. Chrome 39 and FF 34.
THe support case refered to on this Jira is for 3.3.0_P02. THe current 3.3.0 P02 showcase also shows this issue. Found issues with json object with IE8 that could be related:-
http://stackoverflow.com/questions/4715373/json-object-undefined-in-internet-explorer-8-dom
Note that ICEfaces-4 uses jQuery 1.11, so still a possibility to backport to 3.3.0 . If we move to jQuery-2 there is no support for IE8, so that could be a boundary to any backporting.