javascript code to avoid ECHOing redundant data?

sneakyimp

whatsup?

i have a mySQL / PHP project that features a frame with a hierarchical data tree in it. my PHP script generates the html and javascript to represent the tree and it requires about 400 bytes per node on the tree plus some additional overhead for the base level routines. This makes for a very slow refresh when i have a lot of nodes.

for instance, my current 600-node tree is about 200k.

i was wondering if anyone could recommend a general javascript strategy that would let me just print the critical data (probably an array with a few dimensions) and let javascript fill in the redundant code (again, about 400 bytes per node).

of course, i want this to work in every browser if possible.

Weedpacket

Try asking Javascript questions in a Javascript forum.

MarkR

One option is to have the browser cache the file. Have the data as a .php file which outputs Javascript code (you want to change the Content Type probably, although it may not matter too much), and use a <script src="treedata.php"></script> or something

400 bytes per node sounds extreme, perhaps you can reduce that by storing the data in a more efficient way?

I would normally use a constructor and an array so something like

var nodes = new Array();
nodes[0] = new MyNode(various, parameters, you, require);
nodes[1] = ...
etc

I'd normally put the parent id in, and the name, and the URL - what more do you need? If the URL is too long just put the path and have the javascript add the host name automatically.

Mark

sneakyimp

thanks for your sage advice, weedpacket. i actually have posted to a javascript site. i'm still waiting for a response there. There are so many competent folks here i felt sure i might get some valuable feedback. sorry if it was inappropriate.

MarkR...your advice sounds good...i was just wondering this morning if that <script src="treedata.php"></script> approach might work. might get around to testing it later today.

yes, 400 bytes per node is a lot. the reason for this is because i have mouseover, mouseout, and mouseup events for each node that cause them to change in response to the mouse. when a user clicks one, it becomes the 'selected' node and I can add other buttons elsewhere like "new node" or "move node" or whatever rather than having redundant links next to each and every node like phpmyadmin does.

i am using a TABLE for each row. i tried using DIV or SPAN tags and CSS for indents, but the results were not reliable and didn't port well to different browsers so i switched to a 2-cell table with a transparent gif to effect the indents consistently.

i think i'll go check that javascript board now.

sneakyimp

allright. the javascript forum wasn't much help either...perhaps i should have expended more effort explaining exactly what i was trying to do. the thread is here:

http://www.webdeveloper.com/forum/showthread.php?s=&threadid=40755

at any rate, i did manage to reduce the size of my file from 200KB down to 23KB (about 40 bytes per node--not bad!). HOWEVER, i had problems with my javascript running too slow...IE 6 would prompt me and ask if i wanted to abort the script because it was running slow.

so i wrote another version. it basically works like this: i created a javascript function which did document.write() calls to write all the redundant data. my PHP script just echoes out a call to that function once for each node (in this case 600 nodes). i've attached the results to this post. final result: about 45-50 bytes per node for 600 nodes. there is some overhead in basic functions. for small trees, you have far more bytes per node.