a4j:support onchange event not firing

Question

I'm trying to rerender a second dropdown when i change the value in the first one. But nothing happens when I click and change the value in the first drop down. Have I missed any crucial part?

My xhtml:

<h:form>
    <h:selectOneMenu value="#{adminBean.currentLeadCategory}" required="true" styleClass="formfield fpgeo" style="width:20em;margin-right:20px;">
        <a4j:support event="onchange" action="#{adminBean.currentLeadCategoryChanged()}"
 reRender="componentToReRender"/>
        <s:selectItems value="#{leadCategories}" var="leadCategory" label="#{leadCategory.name}" noSelectionLabel="Choose Category"/>
        <s:convertEntity/>
    </h:selectOneMenu>

<a4j:outputPanel id="componentToReRenderWrapper">

    <h:selectOneMenu id="componentToReRender" value="#{adminBean.currentCounty}"
 styleClass="formfield fpgeo" style="width:20em;margin-right:20px;">
        <s:selectItems value="#{adminBean.counties}" var="county" label="#{county.name}" noSelectionLabel="choose"/>
        <s:convertEntity/>
    </h:selectOneMenu>
<h:messages/>
</a4j:outputPanel>
</h:form>

My bean:

@AutoCreate
@Scope(ScopeType.CONVERSATION)
@Name("adminBean")
@MeasureCalls
@Restrict("#{s:hasRole('admin') or s:hasRole('sales')}")
public class AdminBean implements Serializable {

    private LeadCategory currentLeadCategory;
    private List<County> counties = new ArrayList<County>();
    private County currentCounty;

@Factory(value = "leadCategories", autoCreate = true, scope = ScopeType.SESSION)
    public List<LeadCategory> fetchLeadCategories() {
        Query query = entityManager.createQuery("select l from LeadCategory l");
        return query.getResultList();
    }

public LeadCategory getCurrentLeadCategory() {
        return currentLeadCategory;
    }

    public void setCurrentLeadCategory(LeadCategory currentLeadCategory) {
        this.currentLeadCategory = currentLeadCategory;
    }

    public County getCurrentCounty() {
        return currentCounty;
    }

    public void setCurrentCounty(County currentCounty) {
        this.currentCounty = currentCounty;
    }

    public void currentLeadCategoryChanged() {
        this.loadCountiesForCategory();
    }

    public List<County> getCounties() {
        return counties;
    }

    public void setCounties(List<County> counties) {
        this.counties = counties;
    }

    public void loadCountiesForCategory(){
        if(currentLeadCategory == null){
            counties = new ArrayList<County>();
        }
        counties = new ArrayList<County>(currentLeadCategory.getCounties());
    }


}

EDIT 1:

If i check firebug i get an error: Timestamp: 7/19/12 4:14:44 PM Error: ReferenceError: A4J is not defined Source File: http://localhost:8080/admin/admin.seam?cid=11 Line: 1

Answer 1

Ok found the problem! Major crazyness going on here. Someone has set LoadScriptStrategy param to NONE in the web.xml. This makes that the framework.pack.js and ui.pack.js is NOT loading.

<context-param>
<param-name>org.richfaces.LoadScriptStrategy</param-name>
<param-value>NONE</param-value>
</context-param>

Found this page at docs.jboss

If you use the "NONE" strategy, you must include the following scripts in your portlet or portal page header. If you are using JBoss Portal, you can add this to the jboss-portlet.xml file.

Added <a4j:loadScript src="resource:///org/ajax4jsf/framework.pack.js"/> to my header template and viola everything works like a charm.

I love my job =)

Answer 2

I can see clearly that your xhtml has an ending tag </a4j:outputPanel> but no starting tag: <a4j:outputPanel>
If you rearrange your tags it will work.