8 Replies Latest reply on Oct 23, 2012 8:46 AM by Felipe Leite

    Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

    mojojojo Newbie

      Hi,

       

      I am currently working on a project where all UI actions should be AJAX including our navigation. We have a navigation menu and the content of the page will be rerender based on the selection of the user.

       

      We have home.xhtml which will contain the facelet depending on the value of the contentArea.

       

      home.xhtml

       

      <ui:define name="body"> 
           <ui:include src="#{bean.contentArea}" ></ui:include> 
      </ui:define>
      

       

      The default value of contentArea is /xhtml/contentarea/blank.xhtml

       

      blank.xhtml

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml"
      
          xmlns:h="http://java.sun.com/jsf/html"
      
          xmlns:f="http://java.sun.com/jsf/core"
      
          xmlns:ui="http://java.sun.com/jsf/facelets"
      
          xmlns:a4j="http://richfaces.org/a4j"
      
          xmlns:rich="http://richfaces.org/rich">
      
      This is blank
      
      </html>
      

       

      But when I click on request on my nav header thus contentarea's value is changed to /xhtml/contentarea/request.xhtml, the components and data are loaded but there are javascript error

       

      /xhtml/contentarea/request.xhtml

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml"
      
          xmlns:h="http://java.sun.com/jsf/html"
      
          xmlns:f="http://java.sun.com/jsf/core"
      
          xmlns:ui="http://java.sun.com/jsf/facelets"
      
          xmlns:a4j="http://richfaces.org/a4j"
      
          xmlns:util="http://java.sun.com/jsf/composite/util"
      
          xmlns:rich="http://richfaces.org/rich"> 
      
      <ui:composition> 
      ...
      
      <rich:jQuery selector="#mainTable" timing="domready" query="colResizable()" />
      
      ... 
      </ui:composition> 
      </html>
      

       

      JAVASCRIPT ERROR

       

      TypeError: RichFaces.jQuery is undefined

       

      But when I refresh the page (bean is in session scope), no javascript error.

       

      Please note that in actual there are several javascript error thrown for my richfaces components.

       

      Actual errors:

       

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.ui.TabPanel is not a constructor

      TypeError: RichFaces.ui.Tab is not a constructor

      TypeError: RichFaces.ui.Tab is not a constructor

      TypeError: RichFaces.ui.Tab is not a constructor

      TypeError: RichFaces.ui.Tab is not a constructor

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTableToggler is not a constructor

      TypeError: RichFaces.ui.CollapsibleSubTable is not a constructor

      TypeError: RichFaces.ui.DataTable is not a constructor

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.jQuery is undefined

      TypeError: RichFaces.ui.Tooltip is not a constructor

       

       

      Anybody who has encountered this same problem? Please advise on what am I missing here. Thanks!

        • 1. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
          Sanjeev Shrestha Novice

          Try including <h:head> tag!!! This will solve your problem after the <html> tag. This <h:head> tag must be defined in your main template.

          • 2. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
            mojojojo Newbie

            Hi Sanjeev,

             

            Actually I have <h:head> tag in my template.xhtml. home.xhtml is using template.xhtml as a template.

             

            Anyways I already solved the problem by specifying this in my web.xml

             

             

            <context-param>

                    <param-name>org.richfaces.LoadScriptStrategy</param-name>

                    <param-value>ALL</param-value>

                </context-param>

                <context-param>

                    <param-name>org.richfaces.LoadStyleStrategy</param-name>

                    <param-value>ALL</param-value>

                </context-param>

                <context-param>

                    <param-name>org.richfaces.resourceOptimization.enabled</param-name>

                    <param-value>true</param-value>

                </context-param>

                <servlet>

                    <servlet-name>Resource Servlet</servlet-name>

                    <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>

                    <load-on-startup>1</load-on-startup>

                </servlet>

                <servlet-mapping>

                    <servlet-name>Resource Servlet</servlet-name>

                    <url-pattern>/org.richfaces.resources/*</url-pattern>

                </servlet-mapping>

             

            Now all the richfaces js are packed and loaded on first access of my page.

            • 3. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
              Sanjeev Shrestha Novice

              Great that you solved it!!! . Please mark your answer as correct so that other people can find it useful too!

              • 4. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
                Brendan Healey Master

                You have dynamic include working with server side partial state saving, really? If you have a commandButton/Link in the included

                content does it work on the first click only, only the second click, or never? There are severe technical issues here because ui:include

                is implemented as a tag handler and runs as part of the create/restore view phase.

                 

                I did manage to get it working but only by disabling partial state saving on a per-view basis. Sorry to be sceptical but...

                 

                Regards,

                Brendan.

                • 5. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
                  mojojojo Newbie

                  Hi Brendan,

                   

                  It works when using EL with sessionScoped bean but there's problem with viewScoped bean due to the reason you have mentioned.

                  • 6. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
                    Jose Alvarez de Lara Novice

                    So you mean is possible to display different contents into the same

                    xhtml file deppending on any action.

                     

                    How do you call to the javascript? Where do you put  it?

                     

                    If you post an example I shold be really appreciated.

                     

                    Thanks in advenca,

                    Jose

                    • 7. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
                      Ernesto Hernandez Newbie

                      Hi guys!

                       

                      I have an issue that seems like this one in particular. These are the links of the posts: https://community.jboss.org/message/754055#754055 https://community.jboss.org/message/754894#754894

                       

                      At the beggining the first issue was this one (when I tried to create a Tooltip programmatically): TypeError: RichFaces.ui.Tooltip is not a constructor

                       

                      So after read some posts related to that, I added the following lines inside my web.xml:

                       

                      <context-param>

                          <param-name>org.richfaces.resourceOptimization.enabled</param-name>

                          <param-value>true</param-value>

                      </context-param>

                       

                      <servlet>

                          <servlet-name>Resource Servlet</servlet-name>

                          <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>

                          <load-on-startup>1</load-on-startup>

                      </servlet>

                       

                      <servlet-mapping>

                          <servlet-name>Resource Servlet</servlet-name>

                          <url-pattern>/org.richfaces.resources/*</url-pattern>

                      </servlet-mapping>

                       

                       

                      After that, the issue disappeared and the Tooltip got working, but a new one came out: TypeError: jQuery.atmosphere is undefined

                       

                      And that issue does not let the ajax calls work well. When I came to this post I realized I was missing the following lines:

                       

                      <context-param>

                          <param-name>org.richfaces.LoadScriptStrategy</param-name>

                          <param-value>ALL</param-value>

                      </context-param>

                       

                      So I have added it to my web.xml but the JavaScript error still there. As the matter of fact the issue related to the Tooltip disappear when I add the:

                       

                      <context-param>

                          <param-name>org.richfaces.resourceOptimization.enabled</param-name>

                          <param-value>true</param-value>

                      </context-param>

                       

                      But the TypeError: jQuery.atmosphere is undefined comes alive!

                       

                      I hope some of you guys could help me. Thanks in advance!

                       

                      Regards!

                      • 8. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )
                        Felipe Leite Newbie

                        I found a little trick to fix that.

                        The problem is because you are trying to load a page dynamically and so far the TabPanel (in this case) JS is not loaded (On RichFaces 4.2 this problem does't happen) .

                         

                         

                        Try to put this code on the main page to force load JS for TabPanel

                         

                         

                        <rich:popupPanel>

                                      <rich:tabPanel id="tabPanelAux" switchType="server">

                                                <rich:tab name="DONT REMOVE">

                                                          DUMMY TAB

                                                         </rich:tab>

                                      </rich:tabPanel>

                            </rich:popupPanel>