Search code examples
javajavascriptajaxjsf-2primefaces

How to update the label of p:selectCheckboxMenu without the component being closed after ajax call in primefaces?


There is one problem occurring when I am trying to dynamically generate the label from the backing bean. The problem is that the dropdown that appears vanishes for each selection but the label is updated properly. Is there a workaround for this?

<p:selectCheckboxMenu value="#{formBean.selectedMovies}" label="#{formBean.moviesLabel}"    id="Movies" >
    <f:selectItems value="#{formBean.movies}" ></f:selectItems>
    <p:ajax update="Movies" listener="#{formBean.populateLabel}"></p:ajax>
</p:selectCheckboxMenu>

and

//Backing bean 
public void populateLabel() {
    /* Populating the label with the selected options */
    moviesLabel = new String("");
    if (selectedMovies.size() == 0) {
        moviesLabel = "Select";
    } else {
        for (int i = 0; i < selectedMovies.size(); i++) {
            if (moviesLabel.length() == 0) {
                moviesLabel = selectedMovies.get(i);
            } else {
                moviesLabel = moviesLabel + "," + selectedMovies.get(i);
            }
        }
    }
}

Solution

  • Here is how

    add widgetVar="someVarName" to your p:selectCheckboxMenu

    and modify your p:"ajax by adding oncomplete="someVarName.show()"

    complete code :

    <p:selectCheckboxMenu widgetVar="someVarName" value="#{usersManagmentPage.selectedMovies}" 
            label="#{usersManagmentPage.moviesLabel}"   id="Movies" >
        <f:selectItems value="#{usersManagmentPage.movies}" ></f:selectItems>
        <p:ajax oncomplete="someVarName.show()" listener="#{usersManagmentPage.populateLabel}" update="Movies" ></p:ajax>
    </p:selectCheckboxMenu>
    

    In latest PrimeFaces you should use oncomplete="PF('someVarName').show()" instead of oncomplete="someVarName.show()"