Problem with dynamically generated Mootree

[bofh]

Hi guys,

I've already posted this in the MooTools usergroup, and someone there
told me about this special MooTree group, so, I re-post it here in the
hope that someone can help.
I'd like to use MooTree2 for my project (based on MooTools 1.2b2), and
it's
running quite nice, except of one problem I can't figure out:
My tree is dynamically generated, e.g., when the user logs in to the
system, the JS framework sends a question to the backend, and gets a
new XML layout which is used to update the tree.
That's okay, BUT: The new tree is generated below the old one, instead
of replacing it...
When I reload the entire page with the browser's reload button, the
menutree is okay, and the orphant nodes disappear.
Obviously, that's not a nice behaviour, so I'm thinking of a way to
tell MooTree to replace the tree, instead of just adding the nodes to
the old one.
The tree is initialized in the window.load event, so here's my code to
load the tree:

window.addEvent('load', function() {
var menutree = new MooTreeControl({
div: 'navigation',
mode: 'files',
grid: true,
theme: 'mootree2/mootree.gif',
// some other stuff, e.g. select handler etc.
},{
text: 'Menu',
open: true
});
menutree.root.clear();
menutree.root.load('functions/loadmenu.php?action=loadtree');

}

In the login procedure (written in PHP) I send the following back to
the frontend to reload the tree:

print "<script type=\"text/javascript\">";
print "window.fireEvent('load');";
print "</script>";

I'm quite sure I'm missing something stupid, for example I'm sending
the wrong
event, but I just can't figure it out.

Any clues??

Thanks in advance,

Harald

[Evan Meagher]

Hey Harald- try taking the 'var' off of 'var menutree'. That should make
'menutree' a global object that will be overwritten. I had the same problem
and I think that's what I did.

[mindplay.dk]

A good idea is to namespace your application - this will prevent it
from clashing with other scripts you might be using, assuming that
those are also namespaced ... for example:

var MyApp = {
menutree: new MooTreeControl({

div: 'navigation',
mode: 'files',
grid: true,
theme: 'mootree2/mootree.gif',
// some other stuff, e.g. select handler etc.
},{
text: 'Menu',
open: true
})
}

window.addEvent('load', function() {
MyApp.menutree.root.clear();
MyApp.menutree.root.load('functions/loadmenu.php?
action=loadtree');
}

Putting all of your application's static variables, functions, etc. in
the global MyApp object, keeps your variables and functions from
overlapping with other global variables and functions.

Of course, pick a name that is likely to be unique - not MyApp, but
whatever you would like to call your application. Use a short name.

This also helps your code become self-documenting, as it will be
obvious when other scripts reference something in your application.

[bofh]

Hi,

and thanks to Evan and mindplay.dk for the tips. I finally got it, and
solved the problem:
I've copied my menutree code from one of the examples, and there, the
mootree variable was defined in the window.load event. Since that's
okay when you initialize the tree only ones, it (of course) causes
problems when reloading the tree by firing the load event, as I did:
Every time the load event is fired, the menutree CONSTRUCTOR is
called, generating another instance of my menutree variable.
So, I've rewritten my code, and now, I define the variable menutree,
and call the menutree.root.load somewhere else in the load event
handler.
That's working perfectly well, so, here's the code if someone can use
it:

var js_navigation = {

menutree : new MooTreeControl({
div: 'navigation',
mode: 'files',
grid: true,
theme: 'mootree2/mootree.gif',

//other stuff like select handlers, etc.

},{
text: 'Menu',
open: true

}),
};

js_navigation.menutree.root.clear();
js_navigation.menutree.root.load('functions/loadmenu.php?
action=loadtree');

One word to mootree's div-handler: Normally, I load all JS functions
by including them in the HTML header - that will not work if you
define your tree like I did, because the div for the tree (in my code,
"navigation") is not defined in the header, so, Mootree cannont adopt
it. So, it's better to include the JS at the bottom of the body, where
all divs are defined.
Also took me a few minutes to figure this out...

Thanks again to the list,

Harald

> > told me about this specialMooTreegroup, so, I re-post it here in the

> > hope that someone can help.
> > I'd like to use MooTree2 for my project (based on MooTools 1.2b2), and
> > it's
> > running quite nice, except of one problem I can't figure out:
> > My tree is dynamically generated, e.g., when the user logs in to the
> > system, the JS framework sends a question to the backend, and gets a
> > new XML layout which is used to update the tree.
> > That's okay, BUT: The new tree is generated below the old one, instead
> > of replacing it...
> > When I reload the entire page with the browser's reload button, the
> > menutree is okay, and the orphant nodes disappear.
> > Obviously, that's not a nice behaviour, so I'm thinking of a way to

> > tellMooTreeto replace the tree, instead of just adding the nodes to