CODEWITHSUNDEEP
ajaxjsfeventsprimefaces
ThunderPhoenix
ThunderPhoenix

Reputation: 1883

<f:ajax> doesn't work on PrimeFaces component

I trying to use the onChange event of selectOneMenu, but it doesn't work and the component is not displayed when I add onChange attribue.

Can someone tell me how can I handle the onChange event of <p:selectOneMenu>?

Here is my view:

<p:selectOneMenu id="service" filterMatchMode="startsWith">  
    <f:selectItem itemLabel="Selectionner un Service : "  />  
    <f:selectItems value="#{newOpProgramme.listeSevice}" var="service" itemValue="#{service.serviceId}" itemLabel="#{service.serviceNom}"/>
    <f:ajax event="change" execute="@this" listener="#{newOpProgramme.serviceChange()}" render="nomCdp"/>
</p:selectOneMenu>

And here is the <f:ajax listener> method in a request scoped bean:

public void serviceChange() {
    System.out.println("change");
}

When I change the menu, however, nothing is been printed.

How is this caused and how can I solve it?

Upvotes: 6

Views: 53537

Answers (3)

BalusC
BalusC

Reputation: 1109570

First of all, onChange is the wrong event name. It's change. Secondly, if you intend to call the HTML attribute name, onChange is also the wrong attribute name. It's onchange.

Coming back to your concrete problem; the standard JSF <f:ajax> is not compatible with PrimeFaces components. You should be using PrimeFaces own <p:ajax> instead.

<p:selectOneMenu ...>
    ...
    <p:ajax listener="#{newOpProgramme.serviceChange()}" update="nomCdp" />
</p:selectOneMenu>

Note that I omitted the event and the process attributes. They both have already the right default value of valueChange and @this respectively.

See also:

Upvotes: 26

andrexterz
andrexterz

Reputation: 17

<p:selectOneMenu value="#{someBean.myAttr.id}" valueChangeListener="#someBean.mySelectioMethodListener}">
    <f:selectItems value="#{someBean.listAttrs}" var="item"
        itemLabel="#{item.name}" itemValue="#{item.id}" />
    <p:ajax process="@this" update="someElementId" />
</p:selectOneMenu>

You must put an Id for <f:selectItems /> and set your selection on backing bean side by posted ajax itemValue (id).

Server side method bean without a converter:

public void mySelectionMethodListener(ValueChangeEvent event) {
ApplicationContext context = FacesContextUtils.getWebApplicationContext(FacesContext.getCurrentInstance());        
    SomeBeanDao someBeanDao = (SomeBeanDao) context.getBean(SomeBeanDao.class);
    myAttr = someBeanDao.byId((Long) event.getNewValue());
    System.out.println("value changed...");
}

Upvotes: -1

michalorlik
michalorlik

Reputation: 26

When I want to update something after change in selectOneMenu, I use <f:ajax> tag inside selectOneMenu like this:

  <h:selectOneMenu value="#{bean.selected}" >
... select items here
     <f:ajax event="change" execute="@this" render="search" />
  </h:selectOneMenu>

Where search is the Id of the object you want to update.

Other solution is that you should try onchange not onChange.

Upvotes: 1

Related Questions