Primefaces Mobile ajax update of selectOneMenu fails

Question

I want to create a mobile form using Primefaces 5.2 where one selectOneMenu result updates a second selectOneMenu via Ajax, exactly like the showca

Answer 1

This is a bug in the JavaScript associated with PrimeFaces mobile. It didn't take into account that the mobile renderer inserts additional JS to afterwards relocate the HTML representation of the dropdown elsewhere in the DOM (evidence can be found by checking the difference between raw HTML output ("View Source" in browser) and the actual HTML DOM tree ("Inspect Element" in browser).

The exact JavaScript error as shown in Chrome's console is as below:

Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

(I hope you'll take it as a learning hint to always check the browser's console for clues)

Your best bet is to report this as bug to PrimeFaces guys.

In the meanwhile, the workaround is to wrap it in another (plain) element and update it instead.

<p:selectOneMenu ...>
    ...
    <p:ajax ... update="cityWrapper" />
</p:selectOneMenu>

<h:panelGroup id="cityWrapper">
    <p:selectOneMenu id="city" ...>
        ...
    </p:selectOneMenu>
</h:panelGroup>

---

Unrelated to the concrete problem: that noSelectionOption="true" has only effect when you add hideNoSelectionOption="true" to the component. See also a.o. Best way to add a "nothing selected" option to a selectOneMenu in JSF. Otherwise, just leave out it.