Expand event doesn't fire every time

[forum6691]

I have this method on a tree

  J('#treev').tree({
            onExpand:function(node){
               requeteNoeud(node);
            }
        });

My function "requeteNoeud(node); " is only called after 3 clicks on the directory of the tree.

First, I expand with the mouse. None event onExpand is fired
Second, I de-expand with the mouse, none event onExpand  is fired
Third, I expand again with the mouse and then the event onExpand is fired !

Is it normal ?

[stworthy]

Please refer to this example http://jsfiddle.net/zYD2c/. It works fine.

[forum6691]

My code is the same. I don't think it's a syntax problem.

I add an alert(..) in the onExpand function and I get the same behaviour. Only the third click is taken acount and function is called.

I think the problem is a conflict with other function on the tree on my code, but which is ?

Here is the others functions:

Code:

 J('#treev').tree({ // charge les tooltips adaptés à partir de l'attribut
            formatter:function(node){
                return '<span title="' + node.attributes.info + '">' + node.text + '</span>';
            }
        });
        J('#treev').tree({ // appel du plugin
            onClick:function(){
                var nodes = J('#treev').tree('getChecked');
                var s = '';
                for(var i=0; i<nodes.length; i++){
                        if (s != '') s += ',';
                        s += nodes[i].id;
                }s
                alert(s);
            }
        });
        J('#treev').tree({ 
            onCheck:function(node,checked){
               if(checked) alert(node);
            }
        });
        // On sélectionne l'ouverture d'un noeud dans l'arborescence
        J('#treev').tree({ 
            onExpand:function(node){
               alert('expand node '+node.text);
               requeteNoeud(node); 
            }
        }); 
        // Extension de méthode pour implémenter une fonction removeAll dans le tree
        J.extend(J.fn.tree.methods, {
            removeAll:function(jq){
		return jq.each(function(){
			var roots = J(this).tree('getRoots');
			for(var i=0; i<roots.length; i++){
				J(this).tree('remove', roots[i].target);
			}
		})
            }   
        })

[stworthy]

Please remove your statement requeteNoeud(node); and see if it works well.

[forum6691]

The behaviour is the same when I remove requeteNoeud(node).
The alert method is only called the third time I click on the little triangle to develop or close the tree

[stworthy]

Please refer to the updated example that is built from your code snippets. It works well.
http://jsfiddle.net/zYD2c/1/

[forum6691]

Effectively your code is OK.

I have to verify my HTML declaration , maybe, there is a problem in this part of code.
I 'll give you some information about .
Thanks

[zcsky027]

I also meet this question.when I put a tree in a window,onexpand event doesn't fire when first click.But when I put the tree in a html directly ,it works well. so I think maybe there are some bugs in the tree.

[forum6691]

I have always the same problem with onExpand in a tree.
It takes 3 clisk to have the call of the method.

The html code is:

Code:

    <div id="cc" class="easyui-layout">
      <div id="west" data-options="region:'west',title:'Régates',split:true">
	   <ul id="treev" class="easyui-tree" data-options="animate:true,checkbox:true">
           </ul>
      </div>
     <div id="center" data-options="region:'center',title:'Carte'"></div>
  
     <div data-options="region:'south',title:'Log'">
     	<div id="sud" class="easyui-layout" data-options="fit:true">
     		<div id="log" data-options="region:'center',border:false"></div>	
     		<div id="status" data-options="region:'south'">
                    <table class="statusTable">
                        <tr>
                            <td><div id="mode">Mode:</div></td>
                            <td><div id="regate">Régate:</div></td>
                            <td>Dernière mesure:</td>
                            <td></td>
                            <td>Heure:</td>
                        </tr>
                    </table>
		</div>
	</div> 		
     </div>
    </div>

maybe , the problem comes from there ?

Look at the http://jsfiddle.net/n28905u1/9/
To add data2 to the tree (onExpand method), you have to click 3 times on the first node !

[stworthy]

Notice that your node is defined as:

[{"id":1,"text":"Régate démo 1","attributes":{"info":"Régate d'hiver dans la baie d'Hyères\n du 2014-01-01 au 2014-01-15\n Organisé par:Hyères Plaisance Organisation","table":"phpboost_regate","idDb":"2"},"state":"closed"}]

The state is 'closed' but no children nodes exist. This means that if try to expand the node, the tree will retrieve children nodes from remote server. Because the 'url' property is not assigned, so the retrieving action is not successful, the 'onExpand' event does not fire.

To solve this issue, please try to use the 'onBeforeExpand' event instead of using 'onExpand' event.

http://jsfiddle.net/n28905u1/10/

[forum6691]

OK, I well understood the mecanism with your explanation. Thanks very much.

Effectively, the children is created with a personnal ajax call, and not the url , because I don't arrive to generate a good json code in PHP, so I must transmit a string, modifiy in javascript start and finish character ( [] instead {} ) and then convert into json object before to append to the tree as a children of the node expand previously.

[forum6691]

I tried the 'onBeforeExpand' event , but there is an other problem about the assyncrhonous answer between when I click to expand and when the answer arrive with data. So nothing appears in the tree due to the delay !

I decided to explore the way of the URL included in the create tree instead of methods based on intercepting the behaviour of the tree.

The URL method sends "id' of the node that you want to expand. When I saw this example http://www.jeasyui.com/tutorial/tree/tree2_demo.html
the data are embedded in a database with all id and parentid defined. It's a plate structure.
I have an relational database storing  my value that I want to retreive for the treeview.
So a 'regata' contains 'groups' wich contains themselves 'contacts' with contains themselves 'pointGPS'. It's a hierarchical data that I want to put in the tree with the URL mecanism. The structure is not planned as the example and when I retreive an 'id' from the userclick, I have no way to find with my database if I 'm at the first level (regata), second level (groups), third level (contact) or fourth level (pointGPS) !

Have you an idea to deal with this situation ?

Maybe must I use the scheme described here http://www.jeasyui.com/tutorial/tree/treegrid5.php.
It was just à little the first method I have to implement by without success.

Thanks for your help, because I've passed many hours on this problem , and I'm sceptical to arrive to find a solution.

[stworthy]

The tree has the built-in asynchronous loading feature. You don't need to implement it by yourself. When expanding a 'closed' node, it will try to retrieve its children nodes from remote server. The id value of expanding node will be sent to remote server. In fact the node id can be any string value. You always can give it the value although it does not exist in your database.

[forum6691]

Do I understand that I can use level1-1, level1-2 for example for the two first nodes of the first level, then level2-1, level2-2,... for the nodes of the secondlevel, exctera,.... ? I thought that id can only be a number.

If yes, it would be easyer for me to retreive the good table where are stored the data of the tree.

[forum6691]

Following your last remarks, I decided du test URL Method, but as my PHP code generates not directly Jsoncode, I decide to add the loadFilter Method to convert data return by PHP code to modify it as a correct json format.

But my loadFilter is never called (beakpoint inside with firebug)

Here is the javascript code. I call the 'creeArbre()' method to create the tree

Code:

function convert(nodes)
{
    var long=nodes.length;
    var nodes1='['+nodes.substring(1,long-1)+']'; // on fabrique une chaine au format json
    var nodesJson= J.parseJSON(nodes1);// on convertit en objet json (tableau de valeurs)
    return nodesJson;
}


function creeArbre(mode)
{
J('#treev').tree({ 
            url: '{PATH_TO_ROOT}/regate/?url=/ajax/tree', // L'url vers laquelle la requete sera envoyee
            method:'get',
            queryParams: {mode: mode}, // Les donnees que l'on souhaite envoyer au serveur au format JSON
            loadFilter:function(nodes){
                return convert(nodes);
            }
        }); 
}

What is wrong ? Thank you