selectOneButton cant submit while inside splitButton - ajax

Question

I'm using JSF 2 along with primefaces 5.1, i have a selectOneButton which have 2 values,
EN/FR, i want to be notified each time the language is changed, and then change the locale of the page.
Now the problem is that this selectOneButton is inside a splitButton, and for some reason,
the ajax submit of the "change" event is always returning null for the selectOneButton, and it never passes the values selected.
<h:form prependId="false" id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="langs" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Françcais" itemValue="fr"/>
<f:ajax event="change"/>
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
this just for testing:
public void setLang(String lang) {
System.out.println("Changed: " + lang);
this.lang = lang;
}
when i put the selectOneButton inside a p:menu for examples it works just fine.

Answer 1

This problem is two-fold.
First, most PrimeFaces components, particularly the ones which generate hidden HTML input elements and are presented to enduser by a bunch of divs/lists with click listeners instead of as "plain HTML" inputs, require a <p:ajax> instead of <f:ajax> to be properly processed during ajax submits.
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
Note that I omitted the event attribute as it has the right default value already, which would be valueChange in case of inputs and action in case of commands. The value of change is not necessarily the right default as some components would require click instead, particularly radiobuttons and checkboxes which have a fixed value.
In any case, the general recommendation is, if you're using PrimeFaces, just stick to <p:ajax> all the time. It'll use PrimeFaces-specific jQuery based Ajax API to process the ajax request instead of JSF native Ajax API and it's capable of dealing with PrimeFaces components.
Second, the JavaScript code associated with <p:splitButton> moves the HTML representation of the menu to end of body (in order to ensure best cross browser compatibility as to z-index). This however causes the menu to not be sitting in a form anymore. You can confirm it by looking at the HTML DOM tree in the webbrowser via rightclick and Inspect Element (not View Source!). You can solve this in basically 2 ways:
Move the form to inside the menu item. It wouldn't make sense anyway to submit all other menu items for this specific requirement.
<p:splitButton>
<p:menuitem>
<h:form id="languageForm">
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
</h:form>
</p:menuitem>
</p:splitButton>
Use <p:ajax partialSubmit="true"> to let PrimeFaces Ajax API to collect the invidivual input values instead of searching for a <form> and serializing it (which would fail because there's no form).
<h:form id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax partialSubmit="true" />
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
</h:form>