I display a tree of nodes in a page of html. and use javascript to enable the page users to move nodes around. But I dont know how I can save the change of the tree structure? Is it possible at all to get the position of nodes from javascript?
Save the tree structure of nodes in HTML??
Collapse
X
-
hi ...
:) ... tricky problem ... you should find a database-representation for that structure and you have to save that for the specific user ... its like a user-specific page-config ... may be you could save the current innerHTML of the document and set it back later on when the user comes back?
kind regards -
Thanks a lot for the reply!
Actually the information of the nodes in this html is read from a Matlab data source. I read them from Matlab and display them using a browser driven by Matlab - I will need to run Matlab commands in this brower, the commands dont work in other browser. I'd like to change the positions of the nodes and save the structure back to the Matlab data source.
But I checked all the commands available for html and javascript, seems them can only get information from fixed source code of html, unless using PHP - which is a little bit too far for this Matlab browser.
Cheers,
JoJo
Originally posted by gitshi ...
:) ... tricky problem ... you should find a database-representation for that structure and you have to save that for the specific user ... its like a user-specific page-config ... may be you could save the current innerHTML of the document and set it back later on when the user comes back?
kind regardsComment
-
An example of the source code is as following. In the example, I have four nodes (except the root node). The "average" node has a child "divide". The "divide" node has two children "sum" and "FFT". The purpose of using JSript to move the nodes around is for the user to to change the structure of the tree so that the tree can better represent the user's understanding for a biomedical problem.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
<!--
.drag{position: relative;cursor :hand}
-->
</style>
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/ajax.js"></script>
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js -->
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/drag-drop-folder-tree.js">
</script>
<link rel="stylesheet " href="../../../../Program%20Files/MUnit/MUnit/munit.css" type="text/css"/>
<title>MUnit Control Panel</title>
</head>
<body>
<div id=banner>
<!-- It is part of the license agreement that this banner
remains intact and displayed in reports -->
MUnit from <a href="http://xtargets.com">X Targets</a><br/>
Copyright Brad Phelan 2005, under the GPL license.
</div>
<div id=contents>
<h1>MUnit Control Panel </h1>
<h2>Add Test Suites</h2>
<div id="add">
Enter the name of a test case file eg: <i>my_testcas e</i>. If the
file exists it will be added to the control panel. If it doesn't
exist you will be asked to choose a directory and a new template
test will be created.
<form method="post" action="matlab: munit_cgi">
<input name="test" value="">
<input type="hidden" name="dispatch" value="add"/>
<input type="submit" name="add" value="add"/>
</form>
</div>
<h2>Test Suites</h2>
<div id="tests">
<ul id="dhtmlgoodie s_tree2" class="dhtmlgoo dies_tree">
<p id="node0" noDrag="true" noSiblings="tru e" noDelete="true" noRename="true" >
<a href="#">Root node</a> </p>
<ul>
<li id="node1"><a href="#">averag e
<a href="matlab:ed it('test_averag e');">edit</a>
<a href="matlab:mu nit_control_pan el('suite','tes t_average');">r un</a>
<a href="matlab:mu nit_control_pan el('del','test_ average');">rem ove</a>
<br/>
<ul>
<li id="node2"><a href="#">divide
<a href="matlab:ed it('test_divide ');">edit</a>
<a href="matlab:mu nit_control_pan el('suite','tes t_divide');">ru n</a>
<a href="matlab:mu nit_control_pan el('del','test_ divide');">remo ve</a>
<br/>
<ul>
<li id="node3"><a href="#">sum
<a href="matlab:ed it('test_sum'); ">edit</a>
<a href="matlab:mu nit_control_pan el('suite','tes t_sum');">run</a>
<a href="matlab:mu nit_control_pan el('del','test_ sum');">remove</a>
<br/>
<li id="node4"><a href="#">FFT
<a href="matlab:ed it('test_FFT'); ">edit</a>
<a href="matlab:mu nit_control_pan el('suite','tes t_FFT');">run</a>
<a href="matlab:mu nit_control_pan el('del','test_ FFT');">remove</a>
<br/>
</ul>
</a>
</li>
</ul>
</a>
</li>
</ul>
</ul>
</div>
</div>
<script type="text/javascript">
treeObj = new JSDragDropTree( );
treeObj.setTree Id('dhtmlgoodie s_tree2');
treeObj.setMaxi mumDepth(3);
treeObj.setMess ageMaximumDepth Reached('Maximu m depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
treeObj.initTre e();
treeObj.expandA ll();
</script>
<a href="#" onclick="treeOb j.collapseAll() ">Collapse all</a> |
<a href="#" onclick="treeOb j.expandAll()"> Expand all</a>
</body>
</html>[/HTML]
My problem is that, the structure of nodes is read from a matlab file, means it is not stored on a server so that I can send back the nodes' information by ajax. The only way I can think of is to get the relationship of nodes by JScript. But I dont know whethere it is possilbe at all to do that?? Please leave ur comment if you have any idea on this. Thank you very much!Comment
-
Originally posted by acoderYou could save this information using cookies. You only need to store the positions of the nodes, i.e. left and top values.Comment
-
Originally posted by guaiwolfThanks for replying. I have never used cookies before so my understanding might be wrong. But according to my knowledge, cookies are used to store information between a server and a client in http. In my case, matlab and the browser are not the same as a server and a client?Comment
Comment