ICEfaces
  1. ICEfaces
  2. ICE-10373

showcase - ace:dataTable "'JSON' is undefined" error (IE8)

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major 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)

      Description

      1) showcase > ace:dataTable (SSL configuration/ IE8):
      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

      1. afterFix.PNG
        27 kB
      2. beforeFix.PNG
        27 kB
      3. console.PNG
        13 kB
      4. p01Pinning.PNG
        20 kB

        Activity

        Hide
        Judy Guglielmin added a comment -

        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.

        Show
        Judy Guglielmin added a comment - 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.
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Liana Munroe added a comment - - edited

        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.

        Show
        Liana Munroe added a comment - - edited 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.
        Hide
        Ken Fyten added a comment -

        Art, please try to reproduce using the same icepcvm-ie8 test machine.

        Show
        Ken Fyten added a comment - Art, please try to reproduce using the same icepcvm-ie8 test machine.
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Carmen Cristurean added a comment -

        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.

        Show
        Carmen Cristurean added a comment - 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.
        Hide
        Carmen Cristurean added a comment - - edited

        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.
        Show
        Carmen Cristurean added a comment - - edited 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.
        Hide
        Arturo Zambrano added a comment - - edited

        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.

        Show
        Arturo Zambrano added a comment - - edited 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.
        Hide
        Arturo Zambrano added a comment -

        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.

        Show
        Arturo Zambrano added a comment - 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.
        Hide
        Liana Munroe added a comment -

        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.

        Show
        Liana Munroe added a comment - 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.
        Hide
        Mircea Toma added a comment - - edited

        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.

        Show
        Mircea Toma added a comment - - edited 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.
        Hide
        Mircea Toma added a comment -

        Replaced 'max-height' CSS rules with 'height' for the scrollable data table content to avoid having IE8 switch to compatibility mode.

        Show
        Mircea Toma added a comment - Replaced 'max-height' CSS rules with 'height' for the scrollable data table content to avoid having IE8 switch to compatibility mode.
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r43948 using SSL and non SSL config Tomcat 7. IE 8 on 2 vms, IE 9, 10, 11.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r43948 using SSL and non SSL config Tomcat 7. IE 8 on 2 vms, IE 9, 10, 11.
        Hide
        Ken Fyten added a comment -

        Re-opened to have this applied to the 3.3 maintenance branch also.

        Show
        Ken Fyten added a comment - Re-opened to have this applied to the 3.3 maintenance branch also.
        Hide
        Mircea Toma added a comment -

        Back-ported change to 3.3.0-GA branch.

        Show
        Mircea Toma added a comment - Back-ported change to 3.3.0-GA branch.
        Hide
        Liana Munroe added a comment -

        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

        Show
        Liana Munroe added a comment - 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
        Hide
        Ken Fyten added a comment -

        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.

        Show
        Ken Fyten added a comment - 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.
        Hide
        Liana Munroe added a comment -

        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.

        Show
        Liana Munroe added a comment - 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.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Carmen Cristurean
          • Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: