ICEfaces
  1. ICEfaces
  2. ICE-7577

Javascript not re-evaluated after page load in IE

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-1.8.2.GA_P03
    • Fix Version/s: EE-1.8.2.GA_P04
    • Component/s: Bridge
    • Labels:
      None
    • Environment:
      IE 8 & 9
    • Workaround Description:
      As a workaround the script element should not be wrapped in a h:panelGroup or a HTML element with an ID attribute. Instead the 'script' element itself should have the ID assigned so that it will receive a direct update.

      Description

      The user has an IFRAME used to display an external web application embedded within the main application. This IFRAME is positioned via CSS because when the main application is grown/shrunk they need to be able to resize the IFRAME. In order to achieve this behavior, they have used javascript after the page reloads to calculate and resize this IFRAME.

      Attached is a test case that uses a selectInputText to demonstrate this behavior. With reference to the code below, the javascript at the bottom of the page is executed in Firefox after each interaction with the selectInputText component. However IE only executes this script on page load. Here is an example of their test case page structure:

      <ice:form>
      <ice:selectInputText rows="10" width="300" valueChangeListener="#{autoCompleteBean.updateList}">
      <f:selectItems value="#{autoCompleteBean.list}" />
      </ice:selectInputText>
      ...............
      </ice:form>
      <h:panelGroup id="script1">
       <script lang="javascript">
            // resize the IFRAME
      alert('$$$$$ <h:outputText value="#{autoCompleteBean.random}" />');
       </script>

      NOTE: The alert() or console.log is used to test the issue.

      The DOM updates look very similar between both IE and FF yet only FF executes the javascript when selecting a value from the autoComplete component. Here are the browser updates:

      IE9

      <updates><update address="script1" tag="span"><attribute name="id"><![CDATA[script1]]></attribute><content><![CDATA[<script lang="javascript"> console.log('$$$$$token0.5185649609382004');</script>]]></content></update><update address="rEcSYOS8-MUCJKZCoTZosA:4:dynamic-code" tag="script"><attribute name="id"><![CDATA[rEcSYOS8-MUCJKZCoTZosA:4:dynamic-code]]></attribute><attribute name="type"><![CDATA[text/javascript]]></attribute><content><![CDATA[Autocompleter.Finder.find('j_id8:j_id17').updateNOW('<div><div>Aaronsburg</div><div>Abbeville</div><div>Abbot</div><div>Abbotsford</div><div>Abbott</div><div>Abbottstown</div><div>Abbyville</div><div>Abell</div><div>Abercrombie</div><div>Aberdeen</div></div>');Ice.Focus.setFocus('j_id8:j_id17');//349017359]]></content></update></updates>

      Firefox

      <updates><update address="script1" tag="span"><attribute name="id"><![CDATA[script1]]></attribute><content><![CDATA[<script lang="javascript">console.log('$$$$$token0.9152406893482088');</script>]]></content></update><update address="iQgqEM0lDlAHIalhITI4-A:2:dynamic-code" tag="script"><attribute name="id"><![CDATA[iQgqEM0lDlAHIalhITI4-A:2:dynamic-code]]></attribute><attribute name="type"><![CDATA[text/javascript]]></attribute><content><![CDATA[Autocompleter.Finder.find('j_id8:j_id17').updateNOW('<div><div>Aaronsburg</div><div>Abbeville</div><div>Abbot</div><div>Abbotsford</div><div>Abbott</div><div>Abbottstown</div><div>Abbyville</div><div>Abell</div><div>Abercrombie</div><div>Aberdeen</div></div>');Ice.Focus.setFocus('j_id8:j_id17');//-1171161319]]></content></update></updates>

        Activity

        Tyler Johnson created issue -
        Tyler Johnson made changes -
        Field Original Value New Value
        Salesforce Case [5007000000JM1Rd]
        Tyler Johnson made changes -
        Attachment sf-10626.war [ 13874 ]
        Ken Fyten made changes -
        Fix Version/s EE-1.8.2.GA_P04 [ 10280 ]
        Assignee Priority P1
        Assignee Mircea Toma [ mircea.toma ]
        Hide
        Mircea Toma added a comment -

        There is a difference in IE8 vs IE7 in how nested script elements are handled when inserted into the document using innerHTML. When the update looks like this:

        <span id="...">....<script type="...">alert(....)</script>....<script>

        the inner script elements are lost when the updated is applied. So our searchAndEvaluateScript() function ran after the update is applied cannot find the scripts anymore.

        Show
        Mircea Toma added a comment - There is a difference in IE8 vs IE7 in how nested script elements are handled when inserted into the document using innerHTML. When the update looks like this: <span id="...">....<script type="...">alert(....)</script>....<script> the inner script elements are lost when the updated is applied. So our searchAndEvaluateScript() function ran after the update is applied cannot find the scripts anymore.
        Mircea Toma made changes -
        Workaround Description As a workaround the script element should not be wrapped in a h:panelGroup or a HTML element with an ID attribute. Instead the 'script' element itself should have the ID assigned so that it will receive a direct update.
        Hide
        Mircea Toma added a comment -

        The ICEfacesPage1.xhtml in the attached test case can be change to use the workaround for now by changing the markup from:

        .....
        .....
        <h:panelGroup id="script1">
        <script type="text/javascript">
        alert('$$$$$ <h:outputText value="#

        {autoCompleteBean.random}" />');
        </script>
        </h:panelGroup>
        .....

        to:
        ....
        ....
        <script type="text/javascript" id="script1">
        alert('$$$$$ <h:outputText value="#{autoCompleteBean.random}

        " />');
        </script>
        .....

        Show
        Mircea Toma added a comment - The ICEfacesPage1.xhtml in the attached test case can be change to use the workaround for now by changing the markup from: ..... ..... <h:panelGroup id="script1"> <script type="text/javascript"> alert('$$$$$ <h:outputText value="# {autoCompleteBean.random}" />'); </script> </h:panelGroup> ..... to: .... .... <script type="text/javascript" id="script1"> alert('$$$$$ <h:outputText value="#{autoCompleteBean.random} " />'); </script> .....
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #27029 Wed Dec 21 16:10:46 MST 2011 mircea.toma ICE-7577 Strip 'script' tags contained by the update before it's applied and evaluate them after.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/element.js
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/src/application.js
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/src/script.js
        Hide
        Mircea Toma added a comment -

        Fore some reason IE8 will not insert the script tags into the document when using Element.innerHTML function. So instead of trying to evaluate the script after update is applied the fixed code now collects and strips the scripts elements from the update and then evaluates them after the update is applied.

        Show
        Mircea Toma added a comment - Fore some reason IE8 will not insert the script tags into the document when using Element.innerHTML function. So instead of trying to evaluate the script after update is applied the fixed code now collects and strips the scripts elements from the update and then evaluates them after the update is applied.
        Mircea Toma made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P1

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Tyler Johnson
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: