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