I have a page with a tabView, with 3 tabs, each tab has a tree. The tree of the third tab (DEVICES CATEGORY/TYPE), depends on what I select in the tree of the second tab (CERTIFICATIONS SYSTEM/PROGRAM). I generate the tree of the third tab dynamically when tab changes, using the event "tabChange"
<p:ajax event="tabChange" listener="#{profileMB.onTabChange}" />
When I select an element of the tree of the second tab and I change to the third tab, for the first time, it works OK, but when I return to the second tab and I mark differents nodes of the tree and I change to the third tab, the third tabs doesn't refresh.
The methods of the event it works OK, and generate the tree well.
public void onTabChange(TabChangeEvent event) {
log.debug(Constants.BEGIN);
if(selectedNodesCS!=null && selectedNodesCS.length>0){
rootDeviceCategory =
getDeviceCategoryService().createRootStructure(rootDeviceCategory, null,listCertSystem,listCertProgram);
}
}
I tried using the update in the ajax event "tabChange":
<p:ajax event="tabChange" listener="#{profileMB.onTabChange}" update=":formManagerProfile:tabsProfile:tabDC" />
but the console says:
Can not update component "org.primefaces.component.tabview.Tab" with id "formManagerProfile:tabsProfile:tabDC" without a attached renderer
This is the code of my XHTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:form id="formManagerProfile" style="margin: auto auto">
<h:panelGroup id="displayManager">
<p:panelGrid id="panelUp" style="text-align: left;"
styleClass="panelGridWithoutBorder">
<p:row>
<p:column>
<h:outputText value="#{msg['profile.name']}: " for="profileName" />
</p:column>
<p:column>
<h:inputText id="profileName" value="#{profileMB.profileName}"
maxlength="64" styleClass="width-100x100" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="#{msg['profile.profileGroup']}: "
for="profileGroup" />
</p:column>
<p:column>
<p:selectOneMenu id="profileGroup"
value="#{profileMB.profileGroupSelected}"
converter="#{selectOneMenuConverterSelf}">
<f:selectItem itemLabel="" itemValue="#{null}" />
<f:selectItems id="pgSelectedItem"
value="#{profileMB.listProfileGroups}" var="pgItem"
itemValue="#{pgItem}" itemLabel="#{pgItem.name}" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:commandButton id="editProfileGroup"
icon="#{msg['icon.update']}"
value="#{msg['button.text.updateProfileGroup']}"
title="#{msg['button.text.updateProfileGroup']}"
actionListener="#{profileMB.managementProfileGroup}"
update=":managerProfileGroupForm :growl"
oncomplete="PF('profileGroupManagerDialogWidget').initPosition();PF('profileGroupManagerDialogWidget').show()" />
</p:column>
</p:row>
</p:panelGrid>
<p:panel styleClass="text_align_left">
<p:commandButton id="saveButtonUp" icon="#{msg['icon.save']}"
value="#{msg['button.text.save']}"
title="#{msg['button.text.save']}"
action="#{profileMB.saveProfile}" update=":growl" />
<p:commandButton id="backButtonUp" icon="#{msg['icon.back']}"
value="#{msg['button.text.back']}"
title="#{msg['button.text.back']}" action="#{profileMB.backAction}"
ajax="false" />
</p:panel>
</h:panelGroup>
<h:panelGroup>
<p:tabView id="tabsProfile" dynamic="true">
<p:ajax event="tabChange" listener="#{profileMB.onTabChange}" />
<p:tab id="tabMenu" title="MENUS">
<p:tree value="#{profileMB.rootAction}" var="elementAction"
selectionMode="checkbox" selection="#{profileMB.selectedNodes}">
<p:treeNode>
<h:outputText value="#{elementAction}" />
</p:treeNode>
</p:tree>
</p:tab>
<p:tab id="tabCS" title="CERTIFICATIONS SYSTEM/PROGRAM">
<p:tree id="TreeCS" value="#{profileMB.rootCertSystem}"
var="elementCS" selectionMode="checkbox"
selection="#{profileMB.selectedNodesCS}">
<!-- <p:ajax event="select" listener="#{profileMB.onClickTreeCS}" /> -->
<!-- <p:ajax event="unselect" listener="#{profileMB.onClickUnSelectTreeCS}" /> -->
<p:ajax async="true" delay="none" immediate="true"
process="TreeCS" event="select" />
<p:ajax async="true" delay="none" immediate="true"
process="TreeCS" event="unselect" />
<p:treeNode>
<h:outputText value="#{elementCS}" />
</p:treeNode>
</p:tree>
</p:tab>
<p:tab id="tabDC" title="DEVICES CATEGORY/TYPE">
<p:tree id="TreeDC" value="#{profileMB.rootDeviceCategory}"
var="elementDC" selectionMode="checkbox"
selection="#{profileMB.selectedNodesDevCat}">
<p:ajax event="select" listener="#{profileMB.onClickTreeDC}" />
<p:ajax event="unselect"
listener="#{profileMB.onClickUnSelectTreeDC}" />
<p:treeNode>
<h:outputText value="#{elementDC}" />
</p:treeNode>
</p:tree>
</p:tab>
</p:tabView>
</h:panelGroup>
</h:form>
</ui:composition>
I'm using primefaces v5.1, JSF v2.2.8, spring v3.2.5, hibernate v4.2.7 and java v1.7
I found the solution in p:tabView I must used cache="false"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With