p:dialog closes when valueChangeListener is invoked

Question

I have a <p:dialog> which contains a <h:selectOneMenu> with a valueChangeListener. Here's the relevant code:

<p:dialog> 
    <h:form>
        <div>
            <h:selectOneMenu value="#{itemController.itemId}" valueChangeListener="#{itemController.chkItemType}" onchange="submit()">
                <f:selectItems value="#{itemController.itemsList}" />
            </h:selectOneMenu> 
        </div>
    </h:form>
</p:dialog>

When it is called, the dialog get closed. I would like to keep it open and only close it on cancel button. How can I achieve this?

Answer 1

That's expected behaviour. The onchange="submit()" which you've there submits the entire form synchronously, causing a complete page reload.

You should be using ajax instead to perform the submit. Replace the onchange attribute by just this tag

<f:ajax />

inside the <h:selectOneMenu>. This way the form will be submitted asynchronously, with by default no page reload at all.

Depending on the concrete functional requirement, which you didn't tell anything about, you do probably also not need a valueChangeListener at all, but rather a <f:ajax listener>.

<f:ajax listener="#{itemController.chkItemType}" />

If you'd like to update some parts of the page on successful execution of the ajax request, use its render attribute.

See also:

• When to use valueChangeListener or f:ajax listener?