I’m facing a strange problem here. In my page i have two outputPanel. Inside the first, there is a schedule exhibiting my events queried from the database. Inside the other one, there is a datatable exhibiting the same events just as another means of visualization. Furthermore, there is a selectOneRadio that alternates between the two outputPanels. The problem is: When the page loads, the default outputPanel (the one containing the schedule) (SCREEN 1) is loaded perfectly. But when i alternate the selectOneRadio to the outputPanel containing the datatable and then turn back (SCREEN 2), the outputPanel doesn’t load. And the console of the browser shows the following message when i click anywhere on the page:
Uncaught TypeError: Cannot read property 'top' of undefined primefaces.js.xhtml:1
Uncaught TypeError: Cannot read property 'left' of undefined primefaces.js.xhtml:16
Here is the xhtml page:
<!-- 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>
And here is my bean:
...
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) {
}
}
I’m using the following maven dependency:
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>3.4.2</version>
</dependency>
SCREEN 1:
SCREEN 2:
Try to replace
<p:selectOneRadio&p:ajaxwith<h:selectOneRadio&f:ajaxI’m not a maven user , do double check that you really using only 3.4.2 and take a look at this thread… [PF 3.1 Snapshot] Dialog + OverlayPanel + SelectOneMenu JS E