setOnClickHandler not working


#1

I have an Accordion screen with in each accordion item a tree menu. The tree items are loaded from a xml file. The onclick handler is working fine for menuItem2 but when I click in the tree of menuItem1 nothing happens. I also tested it via a confirm window (confirm(“you clicked node “+myTree.getSelectedItemId()+”?”); )to show the id but the id’s from the menuItem1 are not shown.

Here the script I’m using:

<script src="classes/dhtmlx/dhtmlx.js"></script>
<script>
	var myAcc, myTree;
	function doOnLoad() {
		myAcc = new dhtmlXAccordion({
		 parent: "accObj",
         items: [
                 {id: "menuItem1", text: "WMS"},
                 {id: "menuItem2", text: "Administratie"}
         ] 
		});
        myTree = myAcc.cells("menuItem1").attachTree();
		myTree.setImagePath("classes/dhtmlx/imgs/dhxtree_skyblue/");
		myTree.loadXML("classes/dhtmlx/wms.xml");
        myTree.setOnClickHandler(DoOnclick);
        
       
        myTree = myAcc.cells("menuItem2").attachTree();
        myTree.setImagePath("classes/dhtmlx/imgs/dhxtree_skyblue/");
        myTree.loadXML("classes/dhtmlx/admin.xml");
        myTree.setOnClickHandler(DoOnclick);
        
        function DoOnclick(id){
            switch(myTree.getSelectedItemId()){
                case 'adm_users'  : window.open("frmUserMaintenance.php", "appscreen");                    
                                    break;                                   
                case 'wms_article': window.open("frmArtikel.php", "appscreen");                    
                                    break;                                        
            }
        };            

	}
</script>

The xml’s I’m using:

wms.xml:

<?xml version='1.0' encoding='iso-8859-1'?> and admin.xml: <?xml version='1.0' encoding='iso-8859-1'?> Can anyone tell me what I'm doing wrong. I'm a new user of dhtmlX and already enthusiast about it. The only strange thing I found is that in both xml files the tree id="0". If I change this the tree is not working anymore.

#2

I found the problem. I used for all 3 the trees the same myTree var. I changed this into seperate var’s and now it’s working fine. Also found out how to change the tree id’s. I’m getting the hang a bit of it :stuck_out_tongue:

for the interested people here my code:

<script>
	var myAcc, myTreeWms, myTreeBasis, myTreeAdmin;
	function doOnLoad() {
		myAcc = new dhtmlXAccordion({
		 parent: "accObj",
         items: [
                 {id: "menuItem1", text: "WMS"},
                 {id: "menuItem2", text: "Projecten"},
                 {id: "menuItem3", text: "Basis"},
                 {id: "menuItem4", text: "Administratie"}
         ] 
		});


        myTreeWms = myAcc.cells("menuItem1").attachTree('1');
		myTreeWms.setImagePath("classes/dhtmlx/imgs/dhxtree_skyblue/");
		myTreeWms.loadXML("classes/dhtmlx/wms.xml");
        myTreeWms.setOnClickHandler(DoOnclickWms);


        myTreeBasis = myAcc.cells("menuItem3").attachTree('3');
        myTreeBasis.setImagePath("classes/dhtmlx/imgs/dhxtree_skyblue/");
        myTreeBasis.loadXML("classes/dhtmlx/basis.xml");
        myTreeBasis.setOnClickHandler(DoOnclickBasis);

        myTreeAdmin = myAcc.cells("menuItem4").attachTree('4');
        myTreeAdmin.setImagePath("classes/dhtmlx/imgs/dhxtree_skyblue/");
        myTreeAdmin.loadXML("classes/dhtmlx/admin.xml");
        myTreeAdmin.setOnClickHandler(DoOnclickAdm);
        

        
        function DoOnclickWms(id){
            switch(myTreeWms.getSelectedItemId()){
                case 'wms_article': window.open("frmArtikel.php", "appscreen");                    
                                    break;                                        
            }
        };            

        function DoOnclickBasis(id){
            switch(myTreeBasis.getSelectedItemId()){
                case 'basis_instellingen'  : window.open("frmBasicSetup.php", "appscreen");                    
                                            break;                                   
            }
        };

        function DoOnclickAdm(id){
            switch(myTreeAdmin.getSelectedItemId()){
                case 'adm_users'  : window.open("frmUserMaintenance.php", "appscreen");                    
                                    break;                                   
            }
        };            
	}
</script>

#3

Hi Bennie,
Welcome to the wonderful word of dhtmlx. You’ll find the support guys on this forum responsive and helpful.
As a newbie a few years ago I had a similar challenge when trying to display multiple trees in a Layout. Specifically, a separate tree under different Tabs. Yes, you do need different handles (vars) for each tree. I note that you call a different function for each tree’s onClickHandler.
In my case I opted for a (single) generic function and placed process decision in the called function -

switch (atabbar.getActiveTab()){ case "a1": ... break; case "a2": ...
The ids for the Tabs were “a1”, “a2” …