Trying to show 'loading...' icon when opening tree nodes wit

Suite and Optimus Suite 5
#1

I’m loading data dynamically but the problem is that some of the XML being loaded is very large. I’d like to show the user some assurance that something is happening and I have an animated ‘loading’ gif that I want to show in place of the folder icon when the XML is being generated and parsed.



The tree initializer is shown below. Note the functions that I’m attaching to the onOpenStart and onOpenEnd events.



I’m not getting the expected results. The console.log output is showing up in Firebug but the icon is not changing.

Am I misunderstanding the purpose of onOpenStart and onOpenEnd?



Any ideas? Thanks,

Eric



function loadTree()

{

var field = field_input.value;

tree = new dhtmlXTreeObject(“tree_container”, “100%”, “100%”, -1);



//enable Drag&Drop

tree.enableDragAndDrop(true);





// do something when the user clicks a node

tree.setOnClickHandler(loadInfo);



// load the children when a node is expanded

tree.setXMLAutoLoading(“ajax_page.php”);





tree.attachEvent(“onOpenStart”, function (id, state) {

tree.setItemImage(id, ‘loading.gif’);

console.log('onOpenStart id = ’ + id);

return true; // if function not return true, operation will be stoped

});





tree.attachEvent(“onOpenEnd”, function(id, state) {

console.log('onOpenEnd id = ’ + id);

tree.setItemImage(id, ‘folderOpen.gif’);

});





// load the initial tree

tree.loadXML(“ajax_page.php?id=-1”);



// use the dataProcessor to fire move_node when an item is dragged

myDataProcessor = new dataProcessor(“move_node.php?field=” + field);

myDataProcessor.init(tree);

}

#2

You are using correct approach, but the setItemImage command works in slightly different way.

setItemImage(itemId,image1,image2)
     @param: itemId - id of node
     @param: image1 - node without children icon or closed node icon (if image2 specified)
*     @param: image2 - open node icon (optional)   

So the correct code will be

tree.attachEvent(“onOpenStart”, function (id, state) {

    tree.setItemImage(id, ‘loading.gif’,‘loading.gif’);

    return true; // if function not return true, operation will be stoped

});





tree.attachEvent(“onOpenEnd”, function(id, state) {

    tree.setItemImage(id, ‘folderClose.gif’,‘folderOpen.gif’);

});