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

        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.
        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> .....
        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.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: