ICEfaces
  1. ICEfaces
  2. ICE-10508

ace:animation - JavaScript error thrown when chaining animations

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P02
    • Fix Version/s: EE-3.3.0.GA_P04
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      IE8
    • Assignee Priority:
      P3
    • Support Case References:
    • Workaround Exists:
      Yes
    • Workaround Description:
      Hide
      Swap the order of the animation tags:

                                      <ace:animation event="click"
                                                     name="highlight"/>
                                      <ace:animation event="click"
                                                     name="fade"/>
      Show
      Swap the order of the animation tags:                                 <ace:animation event="click"                                                name="highlight"/>                                 <ace:animation event="click"                                                name="fade"/>

      Description

      An h:commandLink uses two ace:animation tags to chain two animations. This commandLink is used to close an ace:dialog. When the link is clicked in IE8, a JavaScript error is thrown:

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

      This is from the bundled JQuery JavaScript.

      Sample code:
                                  <h:commandLink id="closeEffect"
                                                 value="close with effect">
                                      <f:ajax execute="@this"
                                              render="popDetails"
                                              event="click"
                                              listener="#{TestBean.setDialogVisible(false)}"/>
                                      <ace:animation event="click"
                                                     name="fade"/>
                                      <ace:animation event="click"
                                                     name="highlight"/>
                                  </h:commandLink>

        Issue Links

          Activity

          Hide
          Arran Mccullough added a comment -

          Attached test case that shows this issue.

          Steps:

          • Load welcomeICEfaces.jsf in IE8 or newer IE browser with IE8 emulation on.
          • Click the 'open dialog' link. A dialog is now shown.
          • Click the 'close with effect' link, a JS error will be thrown.
          • Clearing the message will close the dialog but the next time it is opened only the modal layer is shown.
          Show
          Arran Mccullough added a comment - Attached test case that shows this issue. Steps: Load welcomeICEfaces.jsf in IE8 or newer IE browser with IE8 emulation on. Click the 'open dialog' link. A dialog is now shown. Click the 'close with effect' link, a JS error will be thrown. Clearing the message will close the dialog but the next time it is opened only the modal layer is shown.
          Hide
          Mircea Toma added a comment - - edited

          I managed to reproduce the issue but had no success in finding the source of the error. I'll try updating the jQuery library to check if it's a jQuery problem.

          Show
          Mircea Toma added a comment - - edited I managed to reproduce the issue but had no success in finding the source of the error. I'll try updating the jQuery library to check if it's a jQuery problem.
          Hide
          Mircea Toma added a comment -

          Ported back IF4's jQuery base code. The jQuery version was bumped from 1.7 to 1.11. This update fixes the issue.

          Show
          Mircea Toma added a comment - Ported back IF4's jQuery base code. The jQuery version was bumped from 1.7 to 1.11. This update fixes the issue.
          Hide
          Ken Fyten added a comment -

          We should instead move all the way to the latest jQuery 1.12.3 release, instead of just going to 1.11.

          This is captured in new JIRA ICE-11078.

          Show
          Ken Fyten added a comment - We should instead move all the way to the latest jQuery 1.12.3 release, instead of just going to 1.11. This is captured in new JIRA ICE-11078 .
          Hide
          Mircea Toma added a comment -

          Resolved ICE-11078, closing this one as well.

          Show
          Mircea Toma added a comment - Resolved ICE-11078 , closing this one as well.
          Hide
          Carmen Cristurean added a comment - - edited

          EE-3.3.0-maintenance branch r.48972: the issue is resolved on IE8 (or newer IE version in IE8 document mode), and on FF41.

          Browser console errors have been reproduced on Chrome 51:

          ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295 Uncaught TypeError: Cannot read property '0' of undefined$.fx.step.(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295set @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7463run @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7429tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7759jQuery.fx.timer @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8094Animation @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7835doAnimation @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7938each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137animate @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7948(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:22308dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4157(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4207each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4206(anonymous function) @ ace-components.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:5450dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4157(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4207each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4206complete @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:22211opt.complete @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7912fire @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:3232fireWith @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:3362tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7767jQuery.fx.tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8081
          878ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295 Uncaught TypeError: Cannot read property '0' of undefined$.fx.step.(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295set @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7463run @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7429tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7759jQuery.fx.tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8081
          
          Show
          Carmen Cristurean added a comment - - edited EE-3.3.0-maintenance branch r.48972: the issue is resolved on IE8 (or newer IE version in IE8 document mode), and on FF41. Browser console errors have been reproduced on Chrome 51: ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295 Uncaught TypeError: Cannot read property '0' of undefined$.fx.step.(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295set @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7463run @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7429tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7759jQuery.fx.timer @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8094Animation @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7835doAnimation @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7938each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137animate @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7948(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:22308dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4157(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4207each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4206(anonymous function) @ ace-components.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:5450dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4157(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4207each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:370each @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:137dequeue @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:4206complete @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:22211opt.complete @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7912fire @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:3232fireWith @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:3362tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7767jQuery.fx.tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8081 878ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295 Uncaught TypeError: Cannot read property '0' of undefined$.fx.step.(anonymous function) @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:21295set @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7463run @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7429tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:7759jQuery.fx.tick @ ace-jquery.uncompressed.js.jsf?ln=icefaces.ace&v=3_3_0_160622:8081
          Hide
          Carmen Cristurean added a comment -

          Re-tested EE 3.3.0.GA_P04 Jenkins Build # 652 with attached test case.
          The console error from the comment above has been reproduced only on Chrome51, when clicking the 'close with effect' link on the dialog.

          Show
          Carmen Cristurean added a comment - Re-tested EE 3.3.0.GA_P04 Jenkins Build # 652 with attached test case. The console error from the comment above has been reproduced only on Chrome51, when clicking the 'close with effect' link on the dialog.
          Hide
          Arturo Zambrano added a comment -

          It's not very clear to me what's the purpose of the test app. The ace:animation tag is only applicable to standard h:* components, meaning that the effects can only be applied to them. So, in this case, the effects are applied to the command link itself, which are not really visible because the ajax behaviour to close the dialog is run first, before running the animations.

          So far, what I've managed to find out is that the problem has to do with nodes not being available or visible by the time the second animation runs. Using only one animation shows to issues. Reversing the order of the animations (highlight first, fade out second) doesn't show any issues either. Also, applying the same animations in the original order but outside of the dialog shows no issues either.

          Show
          Arturo Zambrano added a comment - It's not very clear to me what's the purpose of the test app. The ace:animation tag is only applicable to standard h:* components, meaning that the effects can only be applied to them. So, in this case, the effects are applied to the command link itself, which are not really visible because the ajax behaviour to close the dialog is run first, before running the animations. So far, what I've managed to find out is that the problem has to do with nodes not being available or visible by the time the second animation runs. Using only one animation shows to issues. Reversing the order of the animations (highlight first, fade out second) doesn't show any issues either. Also, applying the same animations in the original order but outside of the dialog shows no issues either.
          Hide
          Arturo Zambrano added a comment -

          r49015: updated jQuery UI Effects to version 1.11.4

          The effects library is actually part of jQuery UI. It seems like there were some compatibility issues with the newer version of jQuery. The effects library is totally independent of any other jQuery UI components, so it's safe to update separately from any other jQuery UI components. The 1.11.4 version is the latest stable release of jQuery UI.

          This update was committed under ICE-11078.

          Show
          Arturo Zambrano added a comment - r49015: updated jQuery UI Effects to version 1.11.4 The effects library is actually part of jQuery UI. It seems like there were some compatibility issues with the newer version of jQuery. The effects library is totally independent of any other jQuery UI components, so it's safe to update separately from any other jQuery UI components. The 1.11.4 version is the latest stable release of jQuery UI. This update was committed under ICE-11078 .
          Hide
          Liana Munroe added a comment -

          Verified ICEfaces EE-3.3.0 maintenance branch r49017. Tomcat 8, FF 43, Chrome 51, IE edge, 11, 10, 9, 8, 7.

          Show
          Liana Munroe added a comment - Verified ICEfaces EE-3.3.0 maintenance branch r49017. Tomcat 8, FF 43, Chrome 51, IE edge, 11, 10, 9, 8, 7.

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Arran Mccullough
            • Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: