JSF1.2 to JSF2.1 migration: Using a4j:ajax / f:ajax on First page causes: "ReferenceError: RichFaces / jsf is not defined"

I am migrating JSF1.2 application to JSF 2.1. It has a Login page, which uses facelets template. And the template page has h:head tag. Login page has a tag h:selectBooleanCheckbox inside ui:composition/ui:define/h:form/a4j:outputPanel/h:panelGrid/h:panelGroup tags.

<h:selectBooleanCheckbox value="#{bean.alogin}" >
  <a4j:ajax event="click" execute="@form" render="loginPanel" />    
</h:selectBooleanCheckbox>

On click of check box, I am getting 'ReferenceError: RichFaces is not defined' in Browser Error Console.

The issue is same even with using f:ajax tag, and having

<h:outputScript name="jsf.js" library="javax.faces" target="head"/>

in template page/login page.

This issue (of not finding/loading js libs) is coming only on the First load of Login page. That means if I login to my application and logout and then use the above check box, there is no issue.

Please direct with any pointers and that will be very helpful. Thanks very much in advance.

And following is the html generated in head tag:

<script src="/myapp/javax.faces.resource/jsf.js.faces?ln=javax.faces" type="text/javascript">&lt;!--
//--&gt;</script>

I have the two *.faces mappings in web.xml. One is CustomFilter (implementing javax.servlet.Filter) and the other is CustomServlet (extending org.apache.myfaces.webapp.MyFacesServlet).

Solution

ReferenceError: RichFaces / jsf is not defined

This is a JavaScript error. This means that neither var RichFaces = ...; nor var jsf = ...; is anywhere been defined in JavaScript context. This in turn means that auto-including the JSF and RichFaces-provided JavaScript files jsf.js and richfaces.js has failed. This can in turn be caused by not having used the <h:head> component to declare the HTML head which is a mandatory hook for JSF to auto-include JavaScript files.

Apparently you forgot to replace the

<head>
    ...
</head>

in your templates by

<h:head>
    ...
</h:head>

Fix it accordingly.

Using <h:outputScript name="jsf.js" library="javax.faces" target="head"/> only fixes the JSF part of the error, not the RichFaces part and is actually a workaround, not a solution.

Update: as per your question update, you confirmed that you've mapped sort of a login Filter on the exact URL pattern of those resources (at least, the filter name "session filter" in combination with the problem symptoms described so far indicates that you're blocking requests whereby the user is not logged-in). JSF resources are served by *.faces URL pattern through the FacesServlet as well and thus they are checked by that filter as well (if you have studied the generated <script src> URL closely, you'd have realized that).

You likely need to alter your Filter to skip the logged-in check on those resources so that those resources won't be redirected to the login page as well. You could do that by checking if the request URI does not concern the ResourceHandeler.RESOURCE_IDENTIFIER URLs.

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse res = (HttpServletResponse) response;

    if (req.getRequestURI().startsWith(req.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
        chain.doFilter(request, response); // Skip JSF resources (CSS/JS/Images/etc)
        return;
    }

    // ... Continue your login check here.
}