Ajax – Setting primefaces selectOneMenu default value from primefaces tree selected item in jsf with ajax

ajaxjsfprimefaces

in a first form i ve a primefaces multiple selection tree(populated from LDAP) and in another form i ve a selectOneMenu primefaces component. i would like to make the default selectOneMenu value(the first displayed on this menu) to be the value of the tree selected node. i ve tryed to use f:ajax.. but it doesnt work as these elements doesnt belong to the same form (the selectOneMenu name in the render attribute was unknown..)

here is my index.xhtml which contain all these elements : 

 <?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Insert title here</title>
    <script src="JS/general.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="CSS/general.css" />
    <script src="clean/clean-ajax-all.js"></script>
    <script>
        var crudmenu = "crudmenu";
        var adduserform = "adduserform";
    </script>
</h:head>
<body>

    <h:form id="form">

        <p:growl id="messages" showDetail="true" escape="false" />

        <p:tree value="#{treeBean.root}" var="node"
            onNodeClick="this.form.submit();" selectionMode="multiple"
            selection="#{treeBean.selectedNodes}" id="treeMultiple">

            <p:treeNode>
                <h:outputText value="#{node}" />
            </p:treeNode>
        </p:tree>


        <p:commandButton value="Display Selected" update="messages"
            actionListener="#{treeBean.displaySelectedMultiple}" id="btnDisplay" rendered="false"/>  

    </h:form>


    <div id="adduserform" name="adduserform"
        style="text-align: center; overflow: hidden; height: 0px; width: 270px; border: #040600 1px;">


        <h:form>
            <h:panelGrid border="1" columns="2">
            ID :  <p:selectOneMenu value="" panelStyle="width:150px"
                    effect="fade" var="p" style="width:160px" filter="true"
                    filterMatchMode="startsWith">
                    <f:selectItem itemLabel="#{treeBean.selectedNodeValue}"
                        itemValue="" />

                </p:selectOneMenu> 


    objectClass : <p:selectOneMenu value="" panelStyle="width:150px"
                    effect="fade" var="p" style="width:160px" filter="true"
                    filterMatchMode="startsWith">
                    <f:selectItem itemLabel="Select One" itemValue="" />

                </p:selectOneMenu>


            </h:panelGrid>
        </h:form>
    </div>



</body>
</html>

and here is my managed bean :

package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
//other imports..

@ManagedBean(name = "treeBean")
public class TreeBean implements Serializable {


    private TreeNode root;

    private TreeNode[] selectedNodes;

    private String selectedNodeValue;


    public TreeBean() {

        populateTreeFromLdap();

    }


    public String getSelectedNodeValue() {
        if (selectedNodes != null && selectedNodes.length == 1)
            for (TreeNode node : selectedNodes)
            selectedNodeValue = node.getData().toString(); 
        return selectedNodeValue;
    }


    public void setSelectedNodeValue(String selectedNodeValue) {
        this.selectedNodeValue = selectedNodeValue;
    }


    public void populateTreeFromLdap(){
     //code to get entries from LDAP..
            }               


    }

    public TreeNode getRoot() {
        return root;
    }

    public TreeNode[] getSelectedNodes() {
        return selectedNodes;
    }

    public void setSelectedNodes(TreeNode[] selectedNodes) {
        this.selectedNodes = selectedNodes;
    }

    public void displaySelectedMultiple(ActionEvent event) {
        if (selectedNodes != null && selectedNodes.length > 0) {
            StringBuilder builder = new StringBuilder();

            for (TreeNode node : selectedNodes) {
                builder.append(node.getData().toString());
                builder.append("<br />");
            }

            FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
                    "Selected", builder.toString());

            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }
}

The problem is how to refresh the "#{treeBean.selectedNodeValue}" of the selectOneMenu 's itemLabel after the tree node selection happen..

By the way, i m new in jsf and i m really upset that the traditional ajax use for loading
a content in a div from another page doesnt work anymore in jsf..i used that in some previous jsp/servlet applications and it work fine..

thnx for help !!

Best Answer

If I understand what you are trying to do, I would next bind the selectOneMenu to a value on the backing bean. In your getSelectedNodeValue() I would set that value. The final piece to make this work is to use an listener events as shown here: primefaces.org/showcase-labs/ui/treeEvents.jsf.

Related Topic