Ajaxified SelectOneListBox not working [duplicate] - ajax

Question

This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 5 years ago.
I wanted to test if an ajaxified <p:selectOneListBox> element works fine or not. On a JSF+PrimeFaces based portlet I've created the above code. Basically, on a item selection from a <p:selectOneListBox> list, I want to update a label with the value of the previously selected item. Unfortunately, it doesn't seem to work as expected.
.xhtml side:
<form id="myform">
<p:selectOneListbox id="myselect" value="#{bean.optionSelected}">
<p:ajax listener="#{bean.onChange}" process="myselect" update="toupdate" onstart="onstart()" oncomplete="oncomplete()" onerror="onerror()" onsuccess="onsuccess()"/>
<f:selectItem itemLabel="Option 1" itemValue="1" />
<f:selectItem itemLabel="Option 2" itemValue="2" />
<f:selectItem itemLabel="Option 3" itemValue="3" />
</p:selectOneListbox>
<h:outputText id="toupdate" value=">#{bean.optionSelected}" />
</form>
Bean side:
#ManagedBean(name = "bean")
#ViewScoped
public class Bean implements Serializable {
private static final long serialVersionUID = 201709131528L;
private static Logger logger = Logger.getLogger(Bean.class);
private String optionSelected = "-1";
public Bean() {
logger.trace("bean created");
}
#PostConstruct
private void onPostConstruct() {
logger.trace("start");
}
public String getOptionSelected() {
return this.optionSelected;
}
public void setOptionSelected(String optionSelected) {
logger.trace("start");
this.optionSelected = optionSelected;
}
public void onChange() {
logger.trace("start");
}
}
Every time I select an option from the list I've got the following log from the console:
Bean:<init>():bean created
Bean:onPostConstruct():start
And from the console of my browser I've got the following log:
onstart():
onerror():
oncomplete():
As a newcomer to the JSF+PF world, I'd like to know:
1) why the onChange() listener is not invoked.
2) why the property optionSelected is not set.
3) why the bean bean is created on each option selection.
4) why the ajax request fails.
Any clarification would be really apreciated. Thanks.

Answer 1

As a newcomer to the JSF+PF world, I'd like to know: 1) why the onChange() listener is not invoked. 2) why the property optionSelected is not set. 3) why the bean bean is created on each option selection. 4) why the ajax request fails.
I believe all of your issues are caused by the fact that you are using an html <form> element rather than a JSF <h:form> component. I was able to reproduce all these errors locally on my machine (except #4 for some reason), and once I changed the <form> into an <h:form>, everything worked correctly.
For more information on what the JSF h:form tag does, check out these links:
https://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/h/form.html
https://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/api/javax/faces/component/html/HtmlForm.html
What exactly does JSF h:form tag
How to use <f:ajax> in a plain <form> instead of <h:form>?
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?