Unable to ajax update component with p:commandLink click

Question

I have three options for user: two equipment selection and one option to say I don't want equipment. To select two equipment I used p:commandLink. To say I do not want equipment I used h:selectOneRadio.

If user do not want to buy equipment, user can select the option button 'I do not wish to have'. So at anytime, only one button can be selected within the three of them.

If I press h:selectOneRadio button, then other two buttons (p:commandLink) are updating properly to 'select'. But if I select an equipment (p:commandLink), then h:selectOneRadio button is not deselecting even though it's bean value is updated to false.

JSF page

<h:panelGroup id="pwpPanel">
    <div class="row">
        <ui:repeat value="#{reconBean.EQList}" var="equipment">
            <div class="col-md-4">
                <div class="btn-fibre-tab text-center">
                    <ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID != equipment.id }">
                        <p:commandLink id="selectpwp" process="@form" update=":mainForm:pwpPanel"
                            styleClass="select_button" action="#{reconBean.updatePWPItem(equipment.id)}"
                            immediate="true">
                            Select
                            <f:ajax render=":mainForm:pwpPanel" />
                        </p:commandLink>
                    </ui:fragment>
                    <ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID eq equipment.id }">
                        <p:commandLink id="selectedpwp" process="@form" update=":mainForm:pwpPanel"
                            styleClass="selected_button" action="#{reconBean.updatePWPItem(equipment.id)}"
                            immediate="true">
                            Selected
                            <f:ajax render=":mainForm:pwpPanel" />
                        </p:commandLink>
                    </ui:fragment>
                </div>
            </div>
        </ui:repeat>
    </div>
    <div class="row">
        <div class="col-sm-12 ">
            <h:selectOneRadio value="#{reconBean.notPurchaseWithPurchase}" id="radioDoNotWant"
                name="pwpEquipment">
                <f:selectItem itemLabel="I do not wish to have" itemValue="true" />
                <f:ajax event="click" execute="@this" listener="#{reconBean.resetPWPSelection}"
                    render="pwpPanel" />
            </h:selectOneRadio>
        </div>
    </div>
</h:panelGroup>

Bean values

public void updatePWPItem(String itemID) {
    pwpSelectedEquipmentID = itemID;
    notPurchaseWithPurchase = false;
}

public void resetPWPSelection(AjaxBehaviorEvent event) {
    pwpSelectedEquipmentID = null;
}

Answer 1

The problem is the immediate attribute set to true on the CommandLinks. It is essentially to understand the The Lifecycle of a JavaServer Faces Application. The impact of the immediate attribute differs in, on what kind of component it is applied. As stated in a good article:

In the standard JSF lifecycle, the action attribute on an Command component is evaluated in the Invoke Application phase

... if you set immediate="true" on it.

To be honest, i do not exacly know why this prevents your radio option from being unchecked (I am still learning all aspects of the JSF lifecylce), but i think it is because it remains unchanged in the component tree and gets rendered as it was even if the model is updated through your action (if someone may comment on this i will update accordingly).

The solution to your problem is to remove the immediate attribute from your CommandLinks or set it to false.

Some remarks:

• PrimeFaces CommandLinks have build in AJAX capabilities which are enabled by default. There is no need to enclose an additional <f:ajax />. Only if you want to disable AJAX you have to set its ajax attribute to false. The render attribute of Ajax conforms to the update attribute of CommandLink.

• You are using SelectOneRadio in a context it is not designed for. As stated on JSFToolbox:

  This component is designed for situations where you want to display a mutually exclusive list of options to the user as a set of radio buttons.

  Consider using another better suited component like CommandLink or CommandButton.