I need some help to "ajaxify" a tree and a dataTable, both nested in the same tabView. I've searched the primefaces forum (did a post about it there) and stackoverflow, but didn't find related problems.
Basically, I've got a p:tabView component whose tabs contain both a tree component and a dataTable component. The tree is correctly updated when I select another tab. But what I can't get to work is updating the dataTable when I select a node from the tree component.
Indeed, if I add a p:ajax tag inside the p:tree :
<p:ajax event="select"
update=":form:myTabView:#{myBean.currentTabIndex}:myDataTable"
listener="#{myController.doSelectNode}" />
in order to trigger this update, the page doesn't load anymore, giving me the exception :
Cannot find component with expression ":form:myTabView:0:myDataTable" referenced from "form:myTabView:0:tree".
It seems weird as I can see from the generated html that it generates a <table id="form:myTabView:0:myDataTable">
I've tried all other possible values for the update attribute ("myTabView:0:myDataTable", "myDataTable" ...), but to no avail.
Environment : PrimeFaces 4.0 / JSF 2.1.2 / Tomcat 7.0.47
Here is the code. Note that it works well outside of a tabView, with a p:ajax update value of ":form:myDataTable".
The simplified 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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Bienvenue</title>
</h:head>
<h:body>
<h:form id="form">
<p:tabView id="myTabView" value="#{myBean.tabs}" var="currentTab"
dynamic="true" cache="true" activeIndex="#{myBean.currentTabIndex}">
<p:tab id="tab" title="#{currentTab.title}">
<h:panelGrid columns="2">
<h:panelGroup>
<p:tree id="tree" value="#{myBean.treeList[myBean.currentTabIndex]}" var="node"
selectionMode="single" selection="#{myBean.selectedNode}"
cache="true">
<p:ajax event="select"
update=":form:myTabView:#{myBean.currentTabIndex}:myDataTable"
listener="#{myController.doSelectNode}" />
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
</h:panelGroup>
<h:panelGroup>
<h:dataTable id="myDataTable" value="#{myBean.selectedUIModelList}"
var="uIModel">
<h:column>
<p:panel header="" closable="true">
<h:outputText value="#{uIModel.name}" />
</p:panel>
</h:column>
</h:dataTable>
</h:panelGroup>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
MyBean.java
@ManagedBean
@SessionScoped
public class MyBean {
private List<MyTab> tabs;
private int currentTabIndex;
private TreeNode selectedNode;
private List<TreeNode> treeList;
private List<UIModel> selectedUIModelList;
public MyBean() {
currentTabIndex = 0;
// build tabs list
tabs = new ArrayList<>();
MyTab tab = new MyTab();
tab.setTitle("Tab1");
tabs.add(tab);
tab = new MyTab();
tab.setTitle("Tab2");
tabs.add(tab);
treeList = new ArrayList<>();
// build trees
// tree for Tab1
TreeNode root = new DefaultTreeNode("Root", null);
TreeNode parentNode1_1 = new DefaultTreeNode("tab1_node1", root);
TreeNode childNode1_1_1 = new DefaultTreeNode("tab1_node1_1", parentNode1_1);
TreeNode childNode1_1_2 = new DefaultTreeNode("tab1_node1_2", parentNode1_1);
TreeNode parentNode1_2 = new DefaultTreeNode("tab1_node2", root);
TreeNode childNode1_2_1 = new DefaultTreeNode("tab1_node2_1", parentNode1_2);
treeList.add(root);
// tree for Tab2
TreeNode root2 = new DefaultTreeNode("Root", null);
TreeNode parentNode2_1 = new DefaultTreeNode("tab2_node1", root2);
TreeNode childNode2_1_1 = new DefaultTreeNode("tab2_node1_1", parentNode2_1);
TreeNode childNode2_1_2 = new DefaultTreeNode("tab2_node1_2", parentNode2_1);
TreeNode parentNode2_2 = new DefaultTreeNode("tab2_node2", root2);
TreeNode childNode2_2_1 = new DefaultTreeNode("tab2_node2_1", parentNode2_2);
treeList.add(root2);
//instantiate UIModel list
selectedUIModelList = new ArrayList<>();
}
... Getters and setters ...
}
MyTab.java
public class MyTab {
private String title;
... Getters and setters ...
}
UIModel.java
public class UIModel {
private String name;
... Getters and setters ...
}
MyController.java
@ManagedBean
public class MyController {
@ManagedProperty("myBean")
private MyBean myBean;
public void doSelectNode(NodeSelectEvent event) {
String selectedStringNode = ((String)event.getTreeNode().getData());
UIModel newUIModel = new UIModel();
newUIModel.setName(selectedStringNode);
myBean.getSelectedUIModelList().add(newUIModel);
}
... Getters and setters ...
}
Can you suggest where I've made a mistake, or point me to a related resource ?
Thanks for your consideration.
:form:myTabView:myDataTable. i learnt you have to indicate the hierarchy in the coded view not that in the generated one – Michele Mariotti