Question

I have this Primefaces tree:

JSF code

<h:form id="form">  

    <p:tree id="tree" value="#{TreeViewController.root}" var="node" dynamic="true" cache="true" animate="true">  
        <p:treeNode>  
            <h:outputText value="#{node}"/>  
        </p:treeNode> 
    </p:tree>  

</h:form>

Managed Bean

private TreeNode root;  

    public TreeView() {  
        root = new DefaultTreeNode("Root", null);  
        TreeNode node0 = new DefaultTreeNode("Node 0", root);  
        TreeNode node1 = new DefaultTreeNode("Node 1", root);  
        TreeNode node2 = new DefaultTreeNode("Node 2", root);  

        TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);  
        TreeNode node01 = new DefaultTreeNode("Node 0.1", node0);
        TreeNode node02 = new DefaultTreeNode("Node 0.2", node0);  
        TreeNode node03 = new DefaultTreeNode("Node 0.3", node0);
        TreeNode node04 = new DefaultTreeNode("Node 0.4", node0);  
        TreeNode node05 = new DefaultTreeNode("Node 0.5", node0);
        TreeNode node06 = new DefaultTreeNode("Node 0.6", node0);
        TreeNode node07 = new DefaultTreeNode("Node 0.7", node0);  
        TreeNode node08 = new DefaultTreeNode("Node 0.8", node0);  

        TreeNode node10 = new DefaultTreeNode("Node 1.0", node1);  
        TreeNode node11 = new DefaultTreeNode("Node 1.1", node1);  

        TreeNode node000 = new DefaultTreeNode("Node 0.0.0", node00);  
        TreeNode node001 = new DefaultTreeNode("Node 0.0.1", node00);  
        TreeNode node010 = new DefaultTreeNode("Node 0.1.0", node01);  

        TreeNode node100 = new DefaultTreeNode("Node 1.0.0", node10);  
    }  

    public TreeNode getRoot() {  
        return root;  
    }  

I’m interested how I can open a new div containing additional information of the node. I want to give to the user opportunity to browse the nodes. When he clicks on a node on the right side of the tree to see additional information in additional layer. How I can do this?

I found the tag attribute onNodeClick which is used to call JavaScript when tree node is clicked. Maybe with JS I can open a new div?

Not working solution
I tested this code but it’s not working:

<h:form id="form">  

    <p:tree id="tree" value="#{TreeViewController.root}" var="node" dynamic="true" cache="true" animate="true">  
        <p:ajax event="select" listener="#{TreeViewController.onNodeSelect}" update="outputComponent" />
        <p:treeNode>                            
            <h:outputText value="#{node}"/>  
        </p:treeNode> 
    </p:tree>

    <p:outputPanel id="outputComponent">
        <h:outputText value="#{TreeViewController.onNodeSelect}" />
    </p:outputPanel>

</h:form>  

public String onNodeSelect(NodeSelectEvent event) {
        String node = event.getTreeNode().getData().toString();

        return node;
    }

Answer 1

Everything is in the docs (code below is an excerpt of it). Either you use the onNodeClick to call a custom JavaScript method to show your “div” or, and this is what I suggest, you use a ajax event.

<p:ajax event="select" listener="#{treeBean.onNodeSelect}" update="outputComponent" />

Then you can handle the event on the server side:

public void onNodeSelect(NodeSelectEvent event) {
    String node = event.getTreeNode().getData().toString();
    // prepare data you want to show
}

And then have an output component in place, such as an :

<p:outputPanel id="outputComponent">
    <!-- reference the bean in which you put your informatnoi in the onNodeSelect listener-->
</p:outputPanel>