onchange="submit()" reloads my PrimeFaces Mobile page

Question

I am having a problem with my JSF project, where I am using PrimeFaces Mobile. This page has several pm:views I have a list of radio buttons, which looks like this:

<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter"
                                          onchange="submit()" 
                                          valueChangeListener="#{bean.elementChanged}">

                            <f:selectItems value="#{bean.currentItem.elements}" var="element"
                                           itemLabel="#{element.elementName}" itemValue="#{element}" />

                        </p:selectOneRadio>

My valueChangeListener looks like this:

public void elementChanged(ValueChangeEvent e) {
    currentElement = (Element) e.getNewValue();

    System.out.println(getCurrentElement().getElementName());
}

The problem is, whenever I click on a radio button element, my page completely reloads to the start view, which has to do with the onchange="submit()". I have also tried f:ajax elements, but this doesn't seems to be working with my radio buttons, because I can't click them when I use this. Is there a possiblty to just submit my current form or pm:view (without the f:ajax)?

PS: I have also tried exactly this on a single PrimeFaces Mobile page, which completely worked, since the application just consisted of one page.

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

When using PrimeFaces components, you should be using <p:ajax> instead of <f:ajax>. Just get rid of the onchange="submit()". This indeed invokes a synchronous (non-ajax) form submit which totally explains the page reload. You also need to replace valueChangeListener by <p:ajax listener>. The valueChangeListener is the wrong tool for the job whereby you're merely interested in invoking a JSF action method when the newly selected value is being set.

All in all, the rewrite should look like this:

<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter">
    <f:selectItems value="#{bean.currentItem.elements}" var="element"
        itemLabel="#{element.elementName}" itemValue="#{element}" />
    <p:ajax listener="#{bean.elementChanged}" />
</p:selectOneRadio>

Don't forget to remove the ValueChangeEvent argument from the elementChanged() method. In order to access the selected value, just access the currentElement property directly.

onchange="submit()" reloads my PrimeFaces Mobile page

1 Answers1

See also: