Question

我在这里遇到一个奇怪的问题。在我的页面中，我有两个 outputPanel 。在第一个内部，有一个时间表展示我从数据库查询的事件。在另一个内部，有一个数据表展示相同的事件，就像另一种可视化手段一样。此外，还有一个 selectOneRadio ，它在两个outputPanel之间交替显示。问题是：当页面加载时，默认的outputPanel（包含计划的那个）（SCREEN 1）被完全加载。但是当我将selectOneRadio交替到包含数据表的outputPanel然后再转回（SCREEN 2）时，outputPanel不会加载。当我点击页面上的任何位置时，浏览器的控制台显示以下消息：

Uncaught TypeError: Cannot read property 'top' of undefined primefaces.js.xhtml:1
Uncaught TypeError: Cannot read property 'left' of undefined primefaces.js.xhtml:16

这是xhtml页面：

<!-- Painel de seleção do tipo de exibição -->
            <p:panelGrid columns="2"
                         styleClass="gridNoLine clearBelow">
                <p:selectOneRadio value="#{eventoBean.tipoExibicaoSelecionada}">
                    <p:ajax listener="#{eventoBean.onTipoExibicaoAlterada}"
                            update=":frmEventos:opCalendario :frmEventos:opTabela"/>
                    <f:selectItem itemValue="1" itemLabel="Exibir calendário"/>
                    <f:selectItem itemValue="2" itemLabel="Exibir tabela"/>
                </p:selectOneRadio>
            </p:panelGrid>

            <!-- Painel do Calendário -->
            <p:outputPanel id="opCalendario">
                <p:schedule id="sEventos"
                            value="#{eventoBean.customScheduleModel}"
                            widgetVar="schEventos"
                            locale="pt"
                            rendered="#{eventoBean.tipoExibicaoSelecionada == 1}">
                    <p:ajax event="eventSelect" 
                            listener="#{eventoBean.onEventSelect}" 
                            update=":frmDetalhesEvento"
                            immediate="true" 
                            oncomplete="dlgDetalhesEvento.show();"/>
                    <p:ajax event="dateSelect" 
                            listener="#{eventoBean.onDataSelecionada}"
                            update="@form :frmNovoEditarEvento"
                            oncomplete="dlgNovoEditarEvento.show();"/>
                </p:schedule>
            </p:outputPanel >

            <!-- Painel do DataTable -->
            <p:outputPanel id="opTabela">
                <p:dataTable
                    value="#{eventoBean.eventos}"
                    paginator="true" rows="5" 
                    rowsPerPageTemplate="5,10"
                    paginatorPosition="bottom"
                    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                    var="evento"
                    rendered="#{eventoBean.tipoExibicaoSelecionada == 2}"
                    emptyMessage="Não há eventos para exibição">
                    <f:facet name="header">
                        Eventos
                    </f:facet>
                    <!-- Colunas de edição e exclusão -->
                    <p:column styleClass="commandColumn">
                        <f:facet name="header">
                            <h:outputLabel value="Editar"/>
                        </f:facet>
                        <p:commandButton image="ui-icon-pencil" 
                                         title="Editar"
                                         update=":frmNovoEditarEvento:pNovoEditarEvento"
                                         oncomplete="dlgNovoEditarEvento.show();">
                            <f:setPropertyActionListener value="#{evento}" 
                                                         target="#{eventoBean.eventoSelecionado}" />
                        </p:commandButton>
                    </p:column>
                    <p:column styleClass="commandColumn">
                        <f:facet name="header">
                            <h:outputLabel 
                                value="Excluir"/>
                        </f:facet>
                        <p:commandButton id="cbViewExcluir" 
                                         oncomplete="dlgExcluir.show();" 
                                         icon="ui-icon-close" 
                                         title="Excluir">
                            <f:setPropertyActionListener value="#{evento}"
                                                         target="#{eventoBean.eventoSelecionado}" />
                        </p:commandButton> 
                    </p:column>
                    <p:column sortBy="#{evento.nmeEvento}" 
                              styleClass="wrap tableTitleWidth">
                        <f:facet name="header">
                            Nome
                        </f:facet>
                        <p:panelGrid columns="1" 
                                     styleClass="gridNoLine">
                            <h:outputLabel id="olViewNomeEvento" 
                                           value="#{evento.nmeEvento}" 
                                           styleClass="t2"/>
                            <p:panelGrid columns="4" styleClass="gridNoLine wrap">
                                <h:outputLabel value="Início: " styleClass="t3"/>&nbsp;
                                <h:outputLabel value="#{evento.dtaInicioEvento}"/>&nbsp;&nbsp;
                                <h:outputLabel value="Término: " styleClass="t3"/>&nbsp;
                                <h:outputLabel value="#{evento.dtaTerminoEvento}"/>&nbsp;
                            </p:panelGrid>
                            <p:separator title="Descrição do evento"/>
                            <h:outputLabel value="#{evento.dscEvento}" 
                                           styleClass="wrap"/>
                            <p:panelGrid columns="4" 
                                         styleClass="gridNoLine">
                                <p:commandButton value="Atividades"
                                                 styleClass="commandButton"
                                                 title="Gerenciar as atividades do evento."
                                                 action="atividades"/>
                                <p:commandButton value="Recursos"
                                                 styleClass="commandButton"
                                                 title="Alocar recursos para o evento."/>
                                <p:commandButton value="Serviços"
                                                 styleClass="commandButton"
                                                 title="Alocar serviços para o evento."/>
                                <p:commandButton value="Participantes"
                                                 styleClass="commandButton"
                                                 title="Gerenciar participantes do evento."/>
                            </p:panelGrid>
                        </p:panelGrid>
                    </p:column>
                </p:dataTable>
            </p:outputPanel>

这是我的豆子：

...

private int tipoExibicaoSelecionada = 1;

...

public void onTipoExibicaoAlterada() {
    if (tipoExibicaoSelecionada == 1) { // Exibir como calendario

        // Realizando a lógica de painéis
        exibirComoCalendario = true;
        exibirComoTabela = !exibirComoCalendario;

    } else { // Exibir como DataTable

        // Realizando a lógica de painéis
        exibirComoCalendario = false;
        exibirComoTabela = !exibirComoCalendario;

        if (eventos == null) {
            try {
                // Consultar os eventos para exibir no DataTable
                eventos = eventoService.consultarTodos();
            } catch (Exception e) {
            }
        }
    }
}

public void onEventSelect(ScheduleEntrySelectEvent entrySelectEvent) {

    try {
        // Transformando o evento para Pojo
        eventoSelecionado = ScheduleEventConverter.convertToEventoPojo(eventoService, entrySelectEvent.getScheduleEvent());
    } catch (Exception e) {
    }

}

public void onDataInicioAlterada(DateSelectEvent e) {
}

public void onDataTerminoAlterada(DateSelectEvent e) {
}

public void onDataSelecionada(DateSelectEvent e) {
    // Gerando um novo evento para ser preenchido
    eventoSelecionado = new TbEvento();

}

public void loadModel() {

    try {

        // Carregando o custom schedule model
        customScheduleModel = new CustomScheduleModel();

        // Carregando a lista de publicos
        publicos = publicoService.consultarTodos();

        // Carregando os tipos de eventos
        tiposEventos = tipoEventoService.consultarTodos();

    } catch (Exception e) {
    }
}

我正在使用以下maven依赖：

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>3.4.2</version>
</dependency>

屏幕1：

enter image description here

屏幕2：

enter image description here

Answer 1

尝试替换<p:selectOneRadio＆amp; p:ajax与<h:selectOneRadio＆amp; f:ajax

我不是maven用户，请仔细检查您是否真的只使用3.4.2并查看此主题... [PF 3.1 Snapshot] Dialog + OverlayPanel + SelectOneMenu JS E

Schedule + OutputPanel + SelectOneRadio问题

1 个答案: