Details
-
Type: Bug
-
Status: Closed
-
Priority: 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>
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>
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.