【发布时间】：2012-11-19 01:27:07
【问题描述】：
我在这里遇到了一个奇怪的问题。在我的页面中，我有两个 outputPanel。在第一个里面，有一个 schedule 展示了我从数据库中查询的事件。在另一个内部，有一个数据表，它展示了相同的事件，就像另一种可视化方式一样。此外，还有一个 selectOneRadio 在两个输出面板之间交替。问题是：当页面加载时，默认的 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"/>
<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：
【问题讨论】：
-
尝试使用未修改的 primefaces jar...也尝试更新不带表单前缀
update="opCalendario opTabela" -
@Daniel 我已经在使用未修改版本的 primefaces (3.4.2)，我按照你说的做了 (update="opCalendario ...") 但它没有用。更多提示？
-
尝试将
<p:selectOneRadio & p:ajax替换为<h:selectOneRadio & f:ajax（我也不是maven 用户，请仔细检查您是否真的只使用了3.4.2 forum.primefaces.org/viewtopic.php?f=3&t=17954） -
@Daniel 我已经按照你说的做了，而且成功了！
标签： javascript jsf-2 primefaces