Question

I looked at other similar posts, but none that helped. Here is my code:

<script  type="text/javascript">
function submit1()
{
document.forms["form"].submit();
}
</script>

<form name="form">
    <h:selectOneMenu value="#{bean.categorySelected}" onchange="submit1()"
valueChangeListener="#{bean.changeCategory}">
    <f:selectItem itemLabel="Select a Category" itemValue="null" />
    <f:selectItems value="#{bean.items}" />
</h:selectOneMenu>
</form>

When I select from the drop down, it only reloads the component. This means bean.getItems is called, but not the value or valueChangeListener, My logs indicate that it only went through phase phase 1 and 6. If I remember correctly, phase 2-5 doesn’t fire unless the form is submitted. What am I doing wrong?

Answer 1

You need a fullworthy JSF <h:form> component instead of a plain HTML <form> element. A plain HTML <form> element without any method and action attribute fires on submit by default a GET request on the current URL. That confirms exactly the behaviour you’re seeing. It’s like as you’re just refreshing the currently requested page by F5.

So, fix it as follows:

<h:form>
    <h:selectOneMenu value="#{bean.categorySelected}" onchange="this.form.submit()" valueChangeListener="#{bean.changeCategory}">
        <f:selectItem itemLabel="Select a Category" itemValue="null" />
        <f:selectItems value="#{bean.items}" />
    </h:selectOneMenu>
</h:form>

(note that the additional JS function is unnecessary)

The <h:form> will generate a <form method="post"> along with at least two JSF-specific hidden input fields identifying the current form and the view state (check the difference in the generated HTML output after you fixed the JSF code). The combination of the POST request and the two hidden fields enables JSF to know what view it has to deal with and what form it has to process and what listeners and action it has to invoke.