Tree Style Navigation: Difficulty implementing dynamic refresh [Archive]

druski

01-28-2003, 06:52 PM

Hi,

I've been modifying a copy of a tree style (think windows explorer) navigation script from http://www.destroydrop.com/javascripts/tree/ to support two features I need, namely:

Drag n' Drop element reordering (ie changing A B C to C B A)

and

Drag n' Drop element nesting (ie dragging an element onto another to make it a subelement, think subfolders)

I've gotten the first part to work but the second is causing me difficulties because I'd have to fiddle alot with the document, ensuring that the correct images are placed next to the lement based on its nesting level etc.

I've decided the best way to do it is to change the dataset that the script builds the tree from and then have the script rebuild the tree. I would like to do this dynamically (ie no page refreshes).

Unfortunately since I am new to dhtml and to javascript I can't quite figure out how to do this. Currently the script uses document.write()'s, and I guess it would need to be changed to instead attach elements to the dom? I'm not sure I really know what the heck I'm talking about here =)

At any rate any help in figuring this out would be much appreciated. I've tried several things and to no avail. I'd be happy to post the completed version of the script up for everyone to use afterwards, as its really quite a good tree script and most of the other ones on the net require payment. With the original authors permission of course ;)

The functions are all too messy to include here, but this is an example of the html a single element produces. All the weird divs and spans are used for drag and drop purposes.

<DIV class=rowContainer id=treeDiv1 name="div|1|0|Admin Only|0|false|true">
<A href="javascript: oc(1, 0);">
<IMG id=join1 alt="Open/Close node" src="../include/images/tree/plus.gif" align=absBottom border=0>
</A>
<A onmouseover="window.status='Admin Only';return true;"
title="Admin Only" onclick=highlight(1);
onmouseout="window.status=' ';return true;"
href="admin.php">
<SPAN class=itemIcon id=itemIcon|1>
<IMG id=icon1 alt="Security Profile" src="../include/images/tree/lock.gif" align=absBottom border=0>
</SPAN>
<SPAN class=itemName id=itemName|1>
Admin Only
</SPAN>
</A>
</DIV>

I've attached the full scripts for the tree and the dragndrop function. I've been hacking at it recently so it may not function properly, but all I'm looking for here is an example of how a script could dynamically output a line like the above to a page in sucha fashion that the script could be told to destroy the tree and then rebuild it from the dataset without refreshing the page

Thanks!

-drew

ConfusedOfLife

01-28-2003, 11:07 PM

Hi
I'll take a look at your code and see what I can do. But for now, take a look at this:

<body>
<script>
v = document.createElement("input");
v.setAttribute("type", "button");
v.setAttribute("value", "enter");
v.onclick = function() { alert('damn');};
document.body.appendChild(v);
</script>
</body>

As you see, you can make an element by createElement and then paste it to any part of your page by appendChild. I pasted my button to the body, but if you had a div with the id of "test" and you wanted to append the button to it, you had to write : document.getElementById("test").appendChild(v);
I hope that it helped for now.