ここで奇妙な問題に直面しています。私のページには2つのoutputPanelがあります。最初の内部には、データベースから照会された私のイベントを示すスケジュールがあります。もう一方の内部には、視覚化の別の手段として同じイベントを示すデータテーブルがあります。さらに、2 つのoutputPanelを交互に切り替える selectOneRadio があります。問題は次のとおりです。ページが読み込まれると、デフォルトの outputPanel (スケジュールを含むもの) (画面 1) が完全に読み込まれます。しかし、selectOneRadio を datatable を含む 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"/>
<h:outputLabel value="#{evento.dtaInicioEvento}"/>
<h:outputLabel value="Término: " styleClass="t3"/>
<h:outputLabel value="#{evento.dtaTerminoEvento}"/>
</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:
