Why the accordion richfaces does not work after being rendered using the tag f: ajax?

问题

These are my pages:

marcarConsulta.xhtml

<ui:composition template="templates/main_template.xhtml"
    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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="conteudo">

        <h:panelGroup layout="block" id="ajax_especialidade">
            <h:panelGroup layout="block"
                rendered="#{marcarConsulta.exibeEspecialidades}">
                <br />
                <h:outputLabel value="ESPECIALIDADE" for="pEspecialidade" />
                <br />
                <h:selectOneMenu id="pEspecialidade"
                    value="#{marcarConsulta.codigoEspecialidadeSelecionada}"
                    styleClass="form">
                    <f:selectItem itemValue="0"
                        itemLabel="Selecione uma especialidade"
                        noSelectionOption="true" />
                    <f:selectItems value="#{marcarConsulta.especialidades}"
                        var="especialidade" itemValue="#{especialidade.codigo}"
                        itemLabel="#{especialidade.nome}" />
                    <f:ajax event="change"
                        listener="#{marcarConsulta.valorEspecialidadeAlterado}"
                        render="accordion" />
                </h:selectOneMenu>
            </h:panelGroup>
        </h:panelGroup>


        <h:panelGroup id="accordion">
            <h:panelGroup rendered="#{empty marcarConsulta.consultaMarcada}"
                layout="block">
                <ui:include src="agenda.xhtml" />
            </h:panelGroup>
        </h:panelGroup>

    </ui:define>

</ui:composition>

This page contains a selectOneMenu that renders the panelGroup that contains the include to page agenda.xhtml whenever the value is changed.

agenda.xhtml

<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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:panelGroup align="left"
        rendered="#{not empty marcarConsulta.consultasDisponiveis}"
        style="background-image: url(http://www.hapvida.com.br/img/bg-marcaconsulta-medico.png); background-repeat: repeat-x; background-color: #eeeeee; margin: 10px;">

        <h:panelGroup layout="block">
            * Clique sobre o médico desejado para agendar sua consulta ou selecione outra opção (data, médico ou local).
        </h:panelGroup>
        <h:panelGroup layout="block">
            <h:panelGroup
                style="margin-left:110px;font-size:12px;font-weight:bold;color:#006600;">Médico</h:panelGroup>
            <h:panelGroup
                style="margin-left:250px;font-size:12px;font-weight:bold;color:#006600;">Local</h:panelGroup>
        </h:panelGroup>

        <rich:accordion
            itemChangeListener="#{marcarConsulta.recuperarHorariosMedico}"
            switchType="ajax" style="width : 680px">
            <c:forEach items="#{marcarConsulta.consultasDisponiveis}"
                var="consultaDisponivel" varStatus="contador">
                <rich:accordionItem value="#{consultaDisponivel}">
                    <f:facet name="header">
                        <!-- <h:outputText styleClass="ui-icon ui-icon-triangle-1-e"/> -->
                        <h:panelGrid columns="2" cellpadding="10"
                            columnClasses="titulo_accordion_item">
                            <h:outputText value="#{consultaDisponivel.nomePessoa}" />
                            <h:outputText value="#{consultaDisponivel.nomeFantasia}" />
                        </h:panelGrid>
                    </f:facet>
                    <h:panelGroup layout="block"
                        rendered="#{marcarConsulta.exibeCamposParaMarcacaoConsulta}">
                        <h:panelGroup layout="block" styleClass="accordion-date">
                            <h2>Escolha uma data:</h2>
                            <rich:calendar popup="false"
                                value="#{marcarConsulta.dataSelecionada}" mode="ajax"
                                firstWeekDay="0" boundaryDatesMode="scroll"
                                dataModel="#{calendarModel}" datePattern="dd/MM/yyyy">
                                <f:ajax listener="#{marcarConsulta.recuperarHorario}"
                                    render="horario#{contador.index}" />
                            </rich:calendar>
                        </h:panelGroup>
                        <img
                            src="http://www.hapvida.com.br/marcaconsulta/css/ui-lightness/images/Actions-go-next-icon.png"
                            style="float: left; margin: 40px 5px 0px 5px;" />
                        <h:panelGroup layout="block" id="horario#{contador.index}"
                            styleClass="accordion-date">
                            <h2>Escolha um horário</h2>
                            <h:panelGroup
                                rendered="#{not empty marcarConsulta.dataSelecionada}">
                                <h2>
                                    para o dia
                                    <h:outputText value="#{marcarConsulta.dataSelecionada}">
                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                    </h:outputText>
                                </h2>
                            </h:panelGroup>
                            <h:selectOneMenu id="data#{contador.index}"
                                rendered="#{empty marcarConsulta.dataSelecionada}">
                                <f:selectItem itemLabel="Selecione a Data"
                                    noSelectionOption="true" />
                            </h:selectOneMenu>
                            <h:selectOneMenu id="hora#{contador.index}"
                                value="#{marcarConsulta.horarioSelecionado}"
                                rendered="#{not empty marcarConsulta.dataSelecionada}">
                                <f:selectItem itemLabel="Selecione o horario"
                                    noSelectionOption="true" />
                                <f:selectItems value="#{marcarConsulta.horariosString}"
                                    var="horario" itemValue="#{horario}" itemLabel="#{horario}" />
                            </h:selectOneMenu>
                        </h:panelGroup>
                        <img
                            src="http://www.hapvida.com.br/marcaconsulta/css/ui-lightness/images/Actions-go-next-icon.png"
                            style="float: left; margin: 40px 5px 0px 5px;" />
                        <h:panelGroup styleClass="accordion-date">
                            <p>
                                <h:commandButton value="Confirmar Consulta"
                                    action="#{marcarConsulta.executarMarcacaoConsulta}"
                                    styleClass="ui-state-default ui-corner-all" />
                            </p>
                        </h:panelGroup>
                    </h:panelGroup>
            </c:forEach>
        </rich:accordion>
    </h:panelGroup>

</ui:composition>

This is my accordion.

The accodion is rendered, but only works after reloading the page, any ideas.

Thanks in advance

来源：https://stackoverflow.com/questions/13252301/why-the-accordion-richfaces-does-not-work-after-being-rendered-using-the-tag-f