Skip navigation

This project is read only now. Read more.

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

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

mojojojo Aug 2, 2012 11:28 PM

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 )

snjv180 Aug 3, 2012 1:25 AM (in response to mojojojo)

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.
Actions
2. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

mojojojo Aug 3, 2012 1:55 AM (in response to snjv180)

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.
Actions
3. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

snjv180 Aug 3, 2012 2:17 AM (in response to mojojojo)

Great that you solved it!!! . Please mark your answer as correct so that other people can find it useful too!
Actions
4. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

healeyb Aug 3, 2012 5:48 AM (in response to mojojojo)

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.
Actions
5. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

mojojojo Aug 24, 2012 3:58 AM (in response to healeyb)

Hi Brendan,

It works when using EL with sessionScoped bean but there's problem with viewScoped bean due to the reason you have mentioned.
Actions
6. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

pepelara Sep 4, 2012 10:10 AM (in response to mojojojo)

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
Actions
7. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

ealonso04 Sep 4, 2012 2:22 PM (in response to mojojojo)

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!
Actions
8. Re: Problem loading richfaces javascript on dynamic facelet include (Richfaces 4.2.2 )

felipeleite Oct 23, 2012 8:46 AM (in response to mojojojo)

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

Go to original post