Trouble updating <p:outputpanel>

Question

Ok, my problem is I can't update a component (cursos) from ajax, I do not really know why.

Here's my code:

Rol

                                    <h:selectManyCheckbox value="#{usuarioSession.roles}" id="admin" disabled="#{checkView.validarAdm}">
                                        <f:selectItem itemValue="1" itemLabel="Administrador"></f:selectItem>                       
                                        <p:ajax listener="#{checkView.checkBoxAdmin()}" update="est"></p:ajax>
                                    </h:selectManyCheckbox>

                                    <h:selectManyCheckbox value="#{usuarioSession.roles}" id="doce" disabled="#{checkView.validarDoc}">
                                        <f:selectItem itemValue="2" itemLabel="Docente"></f:selectItem>                          
                                        <p:ajax listener="#{checkView.checkBoxDoc()}" update="est, cursos"></p:ajax>
                                    </h:selectManyCheckbox>

                                    <h:selectManyCheckbox value="#{usuarioSession.roles}" id="est" disabled="#{checkView.validarEst}">
                                        <f:selectItem itemValue="3" itemLabel="Estudiante"></f:selectItem>
                                        <p:ajax listener="#{checkView.checkBoxEst()}" update="doce, admin"></p:ajax>
                                    </h:selectManyCheckbox>

                                </div>
                                
                                <p:outputPanel rendered="#{checkView.check2 == true}" id="cursos" >
                                    <div class="mb-3">
                                        <h:outputLabel class="form-label">Curso</h:outputLabel>
                                        <h:selectManyCheckbox value="#{usuarioSession.cursos}">
                                            <c:forEach items="#{crearCursoView.listarCurso()}" var="lc">
                                                <f:selectItem itemValue="#{lc}" itemLabel="#{lc.nombre}"></f:selectItem>
                                            </c:forEach>
                                        </h:selectManyCheckbox>
                                    </div>
                                </p:outputPanel>

Answer 1

You have a very common problem rendered="#{checkView.check2 == true}" because if your outputpanel is not rendered its not in the JSF tree so you can't update it. The secret is to always use a wrapper component that has NO rendered flag on it so you can always just update that wrapper element to make the p:outputPanel show and hide. use the example below and update cursosWrapper instead of cursos

<p:outputPanel id="cursosWrapper">
    <p:outputPanel rendered="#{checkView.check2 == true}" id="cursos" >
        <div class="mb-3">
            <h:outputLabel class="form-label">Curso</h:outputLabel>
            <h:selectManyCheckbox value="#{usuarioSession.cursos}">
                <c:forEach items="#{crearCursoView.listarCurso()}" var="lc">
                    <f:selectItem itemValue="#{lc}" itemLabel="#{lc.nombre}"></f:selectItem>
                </c:forEach>
            </h:selectManyCheckbox>
        </div>
    </p:outputPanel>
</p:outputPanel>

...or use JSF passthrough to add jsf:rendered flag to the inner DIV.

<p:outputPanel id="cursosWrapper">
    <div class="mb-3" jsf:rendered="#{checkView.check2 == true}">
        <h:outputLabel class="form-label">Curso</h:outputLabel>
        <h:selectManyCheckbox value="#{usuarioSession.cursos}">
            <c:forEach items="#{crearCursoView.listarCurso()}" var="lc">
                <f:selectItem itemValue="#{lc}" itemLabel="#{lc.nombre}"></f:selectItem>
            </c:forEach>
        </h:selectManyCheckbox>
    </div>
</p:outputPanel>