Primefaces: Update not working for two components in different tabs

Viewed 23

I have two selectBooleanCheckbox in differet tabs that are linked to the same variable in the backend bean, like this:

.xhtml:

<p:tabView id="tabsView" widgetVar="tabPanelWidget" dynamic="true" cache="true">

    ....

    <p:tab id="tab1">
        <p:outputPanel id="panel1">
            <p:fieldset toggleable="false">
                <p:panelGrid id="panelGrid1">
                    <p:row>
                        <p:column>
                            <p:outputLabel for="toggle1"/>

                            <p:selectBooleanCheckbox id="toggle1" value="#{backingBean.toogleBool}">
                                <p:ajax update="@(.toggle2)"/>
                            </p:selectBooleanCheckbox>
                        <p:column>
                    </p:row>
                </p:panelGrid>
            </p:fieldset>
        </p:outputPanel>
    </p:tab>    

    ....

    <p:tab id="tab2">
        <p:outputPanel id="panel2">
            <p:fieldset toggleable="false">
                <p:panelGrid id="panelGrid2">
                    <p:row>
                        <p:column>
                            <p:outputLabel for="toggle2"/>

                            <p:selectBooleanCheckbox id="toggle2" value="#{backingBean.toogleBool}">
                                <p:ajax update="@(.toggle1)"/>
                            </p:selectBooleanCheckbox>
                        <p:column>
                    </p:row>
                </p:panelGrid>
            </p:fieldset>
        </p:outputPanel>
    </p:tab>    
</p:tabView>

backingBean.java :

....
@Getter @Setter private boolean toggleMailAnhangExtrahieren = true;
....

Obviously this isn't my whole code as that would be too much to post here but I hope I included everything relevant. As you can see I try to use ajax to update the other selectBooleanCheckbox when one of them is clicked. As they are bound to the same variable, I would expect both selectBooleanCheckboxes to have the same status (both checked or both unchecked), but the other checkbox does not update. What am I doing wrong?

1 Answers

You need to fix the update part in the p:ajax tags: @(.<class>) is a class-selector (Primefaces is using the jQuery Selector API, see https://api.jquery.com/category/selectors/), but you want to reference an id. So just use the id itself in the p:ajax tag, e.g.

<p:ajax update="toggle2"/>
Related