Update selected Item in Primefaces selectOneMenu from commandButton

Question

i have a reset Button and want to select a default value in the selectOneMenu component when the button is pressed.

I tried different posts, but don't get it working.

here is my page:

    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="${pageContext.request.contextPath}/templates/default.xhtml">
    <ui:define name="content">
        <h:form>
            <h1>Maschinenverwaltung</h1>

            <p:panelGrid id="editMachinePanelGrid" style="margin-top:200px"
                rendered="true">
                <f:facet name="header">
                    <p:row>
                        <p:column colspan="4">Maschinenverwaltung</p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="4">Maschine</p:column>
                    </p:row>
                </f:facet>
                <p:row>
                    <p:column colspan="2">
                        <p:commandButton id="createModeButton2" ajax="true" type="reset"
                            actionListener="#{machineController.setCreateMode('true')}"
                            value="Neuanlage" update="machineName, deleteMachine" onclick="PF('machineSelector').selectItem(id='noMachine')">

                        </p:commandButton>
                    </p:column>
                    <p:column colspan="2">
                        <p:spacer></p:spacer>
                    </p:column>
                </p:row>
                <p:row></p:row>
                <p:row>
                    <p:column colspan="2">
                        <p:selectOneMenu id="machineSelector"
                            value="#{machineController.currentMachine}" required="true"
                            var="m" effect="puff" converter="MachineConverter">
                            <f:selectItem itemLabel="Maschine auswählen" itemValue="" id="noMachine"/>
                            <f:selectItems value="#{machineController.allMachines}"
                                var="machine" itemLabel="#{machine.name}" itemValue="#{machine}" />
                            <p:column>
                            #{m.name}
                            </p:column>
                            <p:ajax listener="#{machineController.machineSelected}"
                                update="machineName">
                                </p:ajax>
                        </p:selectOneMenu>
                    </p:column>
                    <p:column colspan="2"
                        rendered="#{machineController.deleteMachineDisabled()}">
                        <p:spacer></p:spacer>
                    </p:column>
                    <p:column rendered="#{!machineController.deleteMachineDisabled()}">
                        <p:commandButton id="deleteMachine"
                            action="#{machineController.deleteCurrentMachine()}"
                            value="löschen"
                            disabled="#{machineController.deleteMachineDisabled()}"
                            rendered="#{!machineController.deleteMachineDisabled()}" />
                    </p:column>

                </p:row>
                <p:row>
                    <p:column colspan="2">Maschinenbezeichnung: </p:column>
                    <p:column colspan="2">
                        <p:inputText value="#{machineController.currentMachine.name}"
                            id="machineName"></p:inputText>

                    </p:column>
                </p:row>

                <p:row>
                    <p:column colspan="2">
                        <p:commandButton value="Speichern" partialSubmit="true"
                            process="editMachinePanelGrid"
                            action="#{machineController.saveMachine()}"></p:commandButton>
                    </p:column>
                    <p:column colspan="2">
                        <p:spacer></p:spacer>
                    </p:column>
                </p:row>
            </p:panelGrid>

            <h:messages id="messages" />
        </h:form>
    </ui:define>
    <ui:define name="title">Maschinenverwaltung</ui:define>
</ui:composition>

I know, that i have to use the selectValue() Method, but don't know how to address the Parameter to select the value:

<f:selectItem itemLabel="Maschine auswählen" itemValue="" id="noMachine"/>

I am using Primefaces 5.1

best regards

Heiko

Answer 1

To reset the p:selectOneMenu on client side, you may use the client side API:

First set a widget name for you menu like this:

<p:selectOneMenu widgetVar="wv" ... />

Now you may access and set the value of the menu via the client side API easily:

<p:commandButton 
    onclick="PF('wv').selectValue('');"
/>

Note that the given value in the selectValue -method should be the value defined by the itemValue -attribute of your select item. As it is empty in your case ( itemValue="" ) you may just pass the empty String '' as value, as shown above.

Unrelated: I guess your select item should have set the attribute noSelectionOption='true' instead of (only) having set the item value to the empty String.