1

我在这里遇到了一个奇怪的问题。在我的页面中,我有两个outputPanel。在第一个里面,有一个时间表,展示了我从数据库中查询的事件。在另一个内部,有一个数据显示相同的事件,就像另一种可视化方式一样。此外,还有一个selectOneRadio在两个 outputPanel 之间交替。问题是:当页面加载时,默认的 outputPanel(包含计划的那个)(SCREEN 1)被完美加载。但是,当我将 selectOneRadio 交替到包含数据表的 outputPanel 然后返回(屏幕 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:

在此处输入图像描述

屏幕 2:

在此处输入图像描述

4

1 回答 1

1

尝试用<p:selectOneRadio&p:ajax替换<h:selectOneRadio&f:ajax

我不是 maven 用户,请仔细检查您是否真的只使用 3.4.2 并查看此线程... [PF 3.1 快照] Dialog + OverlayPanel + SelectOneMenu JS E

于 2012-11-21T06:29:11.310 回答