Richfaces is not defined javascript error

P

2

5

When I try to call Richfaces.showModalPanel('id') I am getting Richfaces is not defined javascript error and nothing happening.

In my sample application I have two pages, one is master view and another page is child view. Child view invokes popupPanel in master view using above call. I am not sure what is wrong. Any pointers would be appreciated.

Here are the pages I have:

First page:

<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:richext="http://java.sun.com/jsf/composite/richext">
    <h:head>
        <title>Page Title</title>

    </h:head>
    <h:body>

     <ui:include id="nextPageInclude" src="secondpage.xhtml"/>   
    <rich:popupPanel id="logoutDialogId"
                 width="300"
                 height="50"
                 autosized="true"
                 resizeable="false"
                 moveable="true"
                 modal="true"
                 style="border:5px solid #5e81ac; background-color:#dce3ed;">

        <h:outputText value="Inside logout window"/>
    </rich:popupPanel>

    </h:body>
</html>

Second page:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:head/>
    <a4j:outputPanel id='headerLinks' layout="block">
        <ul id="sddm">
            <li>
            </li>
            <li>
            </li>
            <li>
                <a4j:commandLink id="logoutLinkId"
                                 value="Logout"
                                 onclick="Richfaces.showPopupPanel('logoutDialogId')"
                                 styleClass="linkLogout"/></li>

        </ul>
        <div style="clear:both"></div>
    </a4j:outputPanel>
</ui:composition>

EDIT: Attached loaded JS screenshot

enter image description here

Thank you,

Pinnate answered 1/5, 2012 at 20:27 Comment(0)

S

2

Remove the <h:head> from the include composition. It doesn't belong there and would possibly corrupt the generated HTML head. The <h:head> should be declared only once throughout the view and preferably only in the master template.

Another possible cause is that you've a Filter which happens to match the URL pattern of resource requests as well which in turn is not doing its job entirely right. Check HTML source which <script> elements are all generated and press F12 in Firebug/Chrome/IE9 and explore the Net (or Network) tab to see what browser has all retrieved as to JS resources.

Update: the object name is RichFaces with the uppercase F, not Richfaces. Fix it as well.

Scarification answered 1/5, 2012 at 20:30 Comment(8)

Hi BalusC, Initially I did try without head in composition, it didn't work. Then I added h:head there, still same issue. I think something else going on. – Pinnate 1/5, 2012 at 20:31

Hi BalusC, Attached screenshot of loaded JS. It does contain jsf.js.xhtml. – Pinnate 1/5, 2012 at 20:38

The richfaces.js contains that function. Please check what the browser has actually retrieved. Your problem indicates that it returned a 404 or something entirely different. Or just follow that script URL yourself by copying it in address bar. – Scarification 1/5, 2012 at 20:39

Having richfaces.js.xhtml in script is correct? It should be just richfaces.js right? – Pinnate 1/5, 2012 at 20:40

Yes, it's correct. JSF resources are handled by FacesServlet. By the way, shouldn't the function name be RichFaces instead of Richfaces? – Scarification 1/5, 2012 at 20:41

Yes, Case was culprit. It should be RichFaces not Richfaces. Now I am getting showPopupPanel is not a function. I need to check it. – Pinnate 1/5, 2012 at 20:51

Perhaps you were reading RichFaces 3.x targeted examples instead of 4.x ones? The API has changed quite since 4.0. We normally use #{rich:component('clientId')}.show() to show it. This basically converts the JSF component client ID to a jQuery object. I have not really used RichFaces extensively, so I can't confirm it for you from top of head. – Scarification 1/5, 2012 at 21:8

Actually I am porting from 3.x to 4.2 and just realized that we need to use rich:component('id').show() instead of Richfaces.... It is indeed working. I didn't find this info in Richfaces upgrade documentation (found in some internet examples). Thanks for your time on this. – Pinnate 1/5, 2012 at 21:16

W

8

The issue with the above code is that since RichFaces 4.0 we can't make the old calls to open a popupPanel, the way you have written it is obsolete, try this if you may instead:-

<a4j:commandLink id="logoutLinkId"
    value="Logout"
    onclick="#{rich:component('logoutDialogId')}.show();"
    styleClass="linkLogout"/>

And similarly to hide the popupPanel use

<a4j:commandLink id="Close_Modal"
    value="Close Logout"
    onclick="#{rich:component('logoutDialogId')}.hide();"
    styleClass="linkLogout"/>

Worrywart answered 2/5, 2012 at 18:57 Comment(3)

Your welcome :) My 1st contribution to the world on stackOverflow – Worrywart 2/5, 2012 at 19:2

Welcome to SO. Keep contributing your knowledge. Gave +1. By the way you may see lot Richfaces4 related questions from me (We are in process of upgrading from 3.x to 4.2) – Pinnate 2/5, 2012 at 19:5

I am all ears if I can find the problem I will share the answer :) – Worrywart 2/5, 2012 at 19:7