7 Replies Latest reply on Jun 13, 2013 11:01 AM by logan.mauzaize.infotel.com

    [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel

    logan.mauzaize.infotel.com

      Hi,

       

      I'm developping a Web application using JSF 2.1.14 and RichFaces 4.1.0. The application is working well on FireFox >= 2.6 and IE < 9 (or using IE 8 compatibility mode) but under strict IE 9, AJAX-request that must render/refresh our tab panel doesn't work.

       

      A JavaScript error mentionned :

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

       

      After a first analysis, we found that error occurs during creation of JavaScript component of tabs at line 43 of togglePanelItem.js :

      this.getTogglePanel().getItems()[this.index] = this;

      The null occurs on getTogglePanel(). The associated parent element isn't found but don't know why because, it belongs to the AJAX-response.

       

       

      We have no idea on how to proceed to analyse the problem deeper. But we can make more test to find the cause.

       

      Is this a known RF bug ?

      Have you any workaround idea ?

       

       

      Thank your for any help you can provide.

        • 1. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
          ppitonak

          Hi,

           

          please upgrade your RichFaces to 4.3.0.Final which is latest stable release. We fixed several issues influencing IE 9 and 10.

           

          Regards,

          Palo

          • 2. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
            shimonl

            I have same issue with 4.3.1.Final (In all browsers).

            I investigated the problem and found out that in some case the JavaScript code exists but the dom element for TogglePannel is not rendered.

            I have it on Ajax request ans I suspect that it has something to to with the fact that somehow the treeView is visited again for JavaScript elements and in this time my backing bean state is changing so the JS is rendered even with no elemet dom is created so the attachToDom methos failed and the the item does not find its panel element.

            I see that change was done with JavaScrpts in ajax response and they are located at the end with complete tag and not inside the page (in the page scrips are located now at the end of the dom also).

            I worked around the problem (or you can call it fix my work) by making sure that state is the same all during the rendering process, but it might affect other places)

            • 3. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
              ppitonak

              Could you please provide some code sample for me so that I can reproduce your issue?

              • 4. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
                shimonl

                It is very hard for me to repreduce the problem in simple code because it happend inside complex search with pull component.

                I tried simple test code, but could not simulate the right time for state change.

                 

                I am sure some one in rich develiopment team knows what has bean changed in this version, because the actual HTML  of togglepanel and its JSs changed.

                • 5. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
                  shimonl

                  I managed to create a test scenario. It is not so real because it has to do with a random but it simulates real scenario.

                   

                  xhtml:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml"

                    xmlns:h="http://java.sun.com/jsf/html"

                            xmlns:rich="http://richfaces.org/rich"

                            xmlns:a4j="http://richfaces.org/a4j">

                  <h:head/>

                  <h:body>

                            <h:form id="form">

                            <rich:togglePanel id="testPannel" rendered="#{manageBean.complete}">

                                      <rich:togglePanelItem name="first">

                                                <h:outputText value="firstPannel" />

                                                <a4j:outputPanel layout="block">

                                                                                                                                                              <rich:toggleControl event="click"

                                                                                                                                                                        targetPanel="testPannel"

                                                                                                                                                                        targetItem="second" />

                                                                                                                                                              <h:outputText value="toggle" />

                                                                                                                                                    </a4j:outputPanel>

                                      </rich:togglePanelItem>

                                      <rich:togglePanelItem name="second">

                                                <h:outputText value="secondPannel" />

                                      </rich:togglePanelItem>

                            </rich:togglePanel>

                            <a4j:commandButton render="form"></a4j:commandButton>

                            </h:form>

                  </h:body>

                  </html>

                   

                  backing bean method:


                  public boolean isComplete() {

                  double f = new Random().nextFloat()-0.5;

                  return f<0;

                  }

                   


                  just try to refresh the page few times or

                  use the a4j:command button. you will see in the dom JS without relevent dom element.

                   

                  Thanks

                  • 6. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
                    logan.mauzaize.infotel.com

                    As I have mentionned in my original post, the tab panel belongs to the AJAX-response. The only similar behaviour that I have noticed is in focus management. Trying to put focus on a text field just after an AJAX request doesn't work under IE 9, I have to had a

                     

                    setTimeout(function () { document.getElementById('myInput').focus(); }, 1000);
                    

                     

                    It has worked one month ago (before my original post) so I suspect somes changes in our code, but can't see what can generate this error.

                     

                    The project has been cancelled by the client, so I have no more time to spent on this problem. When the project will restart, I will try to revert the code to be sure that it had worked and try to upgrade RF version.

                    • 7. Re: [JSF 2.1.14/RF 4.1.0/IE 9] JS problem with AJAX-rendering of tab panel
                      logan.mauzaize.infotel.com

                      After one day spent  to debug the JSF & RichFaces JavaScripts APIs I finally found a solution to my problem.

                       

                      I have to transform my AJAX-updated element from a span element into a div. In my JSF pages, I use <h:panelGroup>, so I have to set the "layout" property to "block".

                       

                      The problem seems to be a specific IE9 behaviour. In JSF API (version 2.1.14), when treating the update nodes of AJAX response, it builds new div element which is affected to "parserElement" variable. Then the content of update node is cleaned from any script and then affected to "html" variable. Finally, the "html" is put into "parserElement.innerHTML". It seems IE9 has problem when parsing the HTML. In result, the parserElement have no only the AJAX-updated element as children. Some "div" are attached to the "parserElement" instead of being children of the AJAX-updated element.

                      To be sure this is a parsing problem, the "html" variable contains valid XML data.

                       

                      The more strange aspect is I find the revision of your code which has break the application and the only change we have made is to put an id on all JSF component to be compliant with cluster environment.

                       

                       

                      I hope this can help someone in future.