Board Logo

How can I overwrite the tree_items.js file so that I can write my own javascript code to build the tree dynamically
chale - 5/10/2006 at 10:10 AM

How can I overwrite the tree_items.js file so that I can write my own javascript code to build the tree dynamically?

I have created my own javascript function so that I can bulild my treeString(a string which represents the tree, it is like tree_items variable in the tree_items.js file) dynamically. How can I assign my custom treeString to TREE_ITEMS variable?

I got a confusion around that.

Thanks in advance.


tigra - 5/10/2006 at 11:27 PM

This depends on what you consider "dynamically". If you mean generated by the server side script then it's simple: you just print the text of the items structure by your server side script. For that you'll have to either move the structure into the main document or rename tree_items.js to tree_items.php/asp/whatewer to make server run your code in there. This forum has dozen of my postings on this subject as well as postings by other members.

You can't dynamically change the structure of the hierarchy without reloading the document once the tree is initialized.


chale - 5/11/2006 at 03:33 PM

I have an html table which is populated from database. I want to build the tree from this html table using javascript code. Can I just delete the content of the 'tree_items.js' file and build the tree from my html table by writing javascript code in this file?

When I try that, a javascript error saying 'TREE_ITEMS is undefined' happens. How can I resolve such a problem.
Please tell me some hint as to how to build the tree by writing javascript code inside tree_items.js file.

Thank you.


tigra - 5/12/2006 at 09:30 AM

The tree uses TREE_ITEMS variable to create the hierarchy of the tree elements. This variable must be available to the browser at the time of the tree initialization. You can either generate it as the text by your server side script or you can create/modify this variable by the client side javascript.

Returning back to terminology: You probably consider your table "populated" from the database not hardcoded. It's true for the server side: the data is pulled from the dynamic source, but next the server side script uses that dynamic data to create the HTML code of the table. That text is sent to the client's browser over the HTTP connection and it doesn't change since. For the client side (browser) your table is hardcoded, it's no different from the table it receives from the static HTML file. So it's rather generated than populated.
Another scenario is the page that has empty table or no table in it's HTML code at the time it gets to the browser. The client side script in the browser can fill it up with the data on the fly during or after the page initialization. This time you'd have to work with the document's objects (DOM) to create table's rows and cells. This is what we consider dynamic on the client side.

Now the same can be projected to creating TREE_ITEMS variable. You can either generate it by your server side script so its text will be the part of the HTML code of the document or you can write javascript code that will build TREE_ITEMS in the browser using the data pulled from existing table in the document. Second option will work only if the table is located above the tree initialization in the HTML code.

From your posting it sounds like you're trying to use second option. That wouldn't be my choice because of the potential browser compatibility issues and the limitation mentioned above. 'TREE_ITEMS is undefined' means that your coded didn't succeed creating TREE_ITEMS variable by the time tree attempts to use it.


chale - 5/12/2006 at 10:23 AM

My sample code looks like this:

<script language="javascript">
function BuildTree()
{
var treeString = "var TREE_ITEMS = [ ['Select a Portfolio/Office', null,";
var idArray = new Array;
var nameArray = new Array;
idArray[0] = "1";
idArray[1] = "1.0070";
idArray[2] = "1.0070.1000";
idArray[3] = "1.0070.1000.3000";
idArray[4] = "1.0070.1000.3000.200";
nameArray[0] = "Priority MX";
nameArray[1] = "Priority Payment Systems";
nameArray[2] = "Agent Offices";
nameArray[3] = "Cathy";
nameArray[4] = "Victor Long";

for(i = 0; i < idArray.length; i++)
{
treeString += "[' + nameArray + ' , 'javascript:hello()'";
var IsLeaf = true;
for(j = i + 1; j < idArray.length - i; j++)
{
if(idArray == idArray[j].toString().substring(0,idArray.toString().length))
{
IsLeaf = false;
break;
}

}

if(IsLeaf)
{
treeString += "],";
}
else
{
treeString += ",";
continue;
}
}


treeString += "]];"; //closing the root node and the tree itself respectively
}
</script>

As you can see from the code, my custom variable treeString is building the tree_items variable from the arrays I have. Now what I want is, as soon as I finish building this treeString variable, I want to write its content into the tree_items.js file so that I will get the right tree_items variable in the file. How can I overwrite the content of this javascritpt file by the content of my custom variable.

Thank you.


tigra - 5/19/2006 at 04:33 PM

hey, new posting on this topic: http://www.softcomplex.com/forum/viewthread_3551/


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/