How to expand a dynamic submenu

Question

I created a dynamic submenu. When I click on this dynamic submenu, I create with DAO another dynamic submenu inside, but this new submenu does not appear and expand automatically. It only appears if I refresh the page. What to do for the children's submenu to appear automatically ?

I trie expanded true, callback bean, faces.update(clientID) without success

My xhtml file with callback bean with bind variable classJS

        <script>
            $(document).ready(function() { 
                $(".classJS").bind("click", function(e) {
                    var parent = document.getElementById(this.id).parentElement;
                    parent = parent.innerHTML;
                    var str = $(this).text()
                    var startPosition = parent.indexOf(str);
                    parent = parent.substring(startPosition-20);
                    parent = parent.split("-");
                    onCallBack( [ { name: 'Id', value: parent[1] } , { name: 'ClientId', value: this.id } ] );
                }); 
            });

            <h:form id="formID">
                <p:remoteCommand actionListener="#{structureOrganiqueBean.onCallBackFromJS}" name="onCallBack" style="display:none"></p:remoteCommand>
                <p:panelMenu  id="panelMenuId" model="#{structureOrganiqueBean.menuModel}" style="width:300px" ></p:panelMenu>
            </h:form>



Mybean : 

            public void onCallBackFromJS() {
                FacesContext context = FacesContext.getCurrentInstance();
                Map<String, String> requestParamMap = context.getExternalContext().getRequestParameterMap();
                String id = requestParamMap.get("Id");
                DefaultSubMenu submenParent = (DefaultSubMenu)findComponent(id);
                addSubMenuChildrenTo( submenParent);
            }

    public void addSubMenuChildrenTo(DefaultSubMenu parentmenuElement) {
        Long idTechnique = getIDTechnique(parentmenuElement)
        List<EntityStructureOrganique> entitesChildren = getFacade().getChildrenById(idTechnique);
        for (EntityStructureOrganique entiteChild : entitesChildren) {
            DefaultSubMenu childSubmenuitem = getDefaultSubMenu(entiteChild);
            parentmenuElement.getElements().add(childSubmenuitem);

        }
    }

addSubMenuChildrenTo is back-called when i click on submenu item parentmenuElement. addSubMenuChildrenTo add new submeno to parentmenuElement. I want parentmenuElement to expand with its new submenus

Answer 1

When page is loaded, a root menu is set and i would want to add dynamic submenu under. And When I click on this dynamic submenu, I create with DAO another dynamic submenu inside, but this new submenu does not appear and expand automatically. It only appears if I refresh the page. What to do for the children's submenu to appear automatically ?

My xhtml file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
            <script type="text/javascript">
                $(document).ready(function() { 
                    $('.maClassJS').click(function(e){
                        e.stopPropagation();
                        onCallBack( [ { name: 'ClientId', value: this.id } ] );
                    });
                }); 
             </script>

        </h:head>
        <h:body>
            <h:form id="formID" name="formID">
                <p:remoteCommand update="panelMenuId" action="#{structureOrganiqueBean.onCallBackFromJS}" name="onCallBack" style="display:none"></p:remoteCommand>
                <p:panelMenu styleClass="maClassJS" id="panelMenuId" model="#{structureOrganiqueBean.menuModel}" style="width:300px" ></p:panelMenu>
            </h:form>
        </h:body>
</html>

My bean file

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.sdzee.exemple;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuElement;
import org.primefaces.model.menu.MenuModel;

/**
 *
 * @author 
 */
@ManagedBean
@SessionScoped
public class StructureOrganiqueBean implements Serializable{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private MenuModel menuModel ;
    private Map<String, MenuElement> mapArborescence;
    private DefaultSubMenu subMenu; 

    public DefaultSubMenu getSubMenu() {
        return subMenu;
    }
    public void setSubMenu(DefaultSubMenu subMenu) {
        this.subMenu = subMenu;
    }
    public Map<String, MenuElement> getMapArborescence() {
        return mapArborescence;
    }
    public void setMapArborescence(Map<String, MenuElement> mapArborescence) {
        this.mapArborescence = mapArborescence;
    }

    @PostConstruct
    public void init() {
        setMapArborescence(new HashMap<>());
        setMenuModel(new DefaultMenuModel());

        setSubMenu(new DefaultSubMenu());
        getSubMenu().setLabel("Home test dynamic SN");
        getSubMenu().setExpanded(Boolean.FALSE);        

        DefaultSubMenu submenuitem0 = new DefaultSubMenu();
        submenuitem0.setLabel("Root");
        submenuitem0.setId("0_0"); //I arbitrarily put 0_0 to match with client side ID. No problem here
        submenuitem0.setStyleClass("maClassJS");
        getSubMenu().getElements().add(submenuitem0);
        getSubMenu().setExpanded(true);
        getMapArborescence().put(submenuitem0.getId(), submenuitem0);

        getMenuModel().addElement(getSubMenu());
    }

    public MenuModel getMenuModel() {
        return menuModel;
    }

    public void setMenuModel(MenuModel menuModel) {
        this.menuModel = menuModel;
    }

    public void addSubMenuChildrenTo(DefaultSubMenu parentmenuElement) {
        if (parentmenuElement.getElementsCount()==0) {
            String idChild = parentmenuElement.getId()+"_0";
            DefaultSubMenu submenuChild = new DefaultSubMenu();
            submenuChild.setLabel("Child"+idChild);
            submenuChild.setId(idChild);
            submenuChild.setStyleClass("maClassJS");
            parentmenuElement.getElements().add(submenuChild);
            getMapArborescence().put(submenuChild.getId(), submenuChild);
        }
    }

    public void onCallBackFromJS() {
        FacesContext context = FacesContext.getCurrentInstance();
        Map<String, String> requestParamMap = context.getExternalContext().getRequestParameterMap();
        String clientId = requestParamMap.get("ClientId");      
        DefaultSubMenu submenParent = (DefaultSubMenu)findComponent(clientId) ;     
        if(submenParent != null) {
            addSubMenuChildrenTo(submenParent);
        }
    }   

    public MenuElement findComponent(final String id) {
        return getMapArborescence().get(id);
    }

}

When i click on "Root", first dynamic submenu appears. But when i click on this first dynamic submenu, nothing appends instead or create a new dynamic submenu under him. But if i refresh the page and i click on the last submenu, a new dynamic sudmenu is created and appears. each time i need to refresh the page intead of expand automatically. Why ?

How to expand a dynamic submenu

Question

1 answers

solution1
0 2019-09-13 23:30:02

How to expand a dynamic submenu

Question

1 answers

solution1 0 2019-09-13 23:30:02

solution1
0 2019-09-13 23:30:02