|
Hi
first of all, I've to say Great Job you did with that tree control. I know I'm not the first to tell you that, but it's really just great.
Unfortunatly I'm encountering a problem that I don't really understand.
I'm using the tree to display certain elements of an XML File. The XML File has an XSL Stylesheet that contains a reference to a Javascript file. The XML File is parsed by my Javascript and a recursive function within adds nodes to the tree.
That all works fine and the tree is shown in my Internet Explorer Window.
In my Page created by the XSL Stylesheet there is also a button to change the current view. (i.e. display all data, display filtered data). One of the functions is a Print Preview function that should open a new Internet Explorer Window and display the tree just in a different position of the window.
So here's my problem:
Normally I create the code for the new Explorer Window by defining a string within my Javascript and add HTML Code to that string. Afterwards I use the Javascipt function document.write(string) to write the string to the new window and the html code is displayed. If I try to do that with my tree I get the following error:
"TreeListControlHandler.allTrees.6.showRootNode is Null or no Object"
I have no Idea what this error means or how to fix that. Maybe anyone of you knows. Would be really glad.
My Code that doesn't work looks like this:
------------------------------------------
F1 = window.open ( "about:blank", "Print_View_Window", "width=700,height=650, left=0, top=0, scrollbars=yes, menubar=yes, toolbar=no, location=no");
F1.focus();.
.
.
var tree = new TreeListControl('Test Tree','../../../dtd_xsl/tlcimages/my_icon_folder.gif', false, false);
//tree.addColumn ( new TreeListControlColumn(20, '') );
tree.addColumn ( new TreeListControlColumn(20, '', true) );
tree.addColumn ( new TreeListControlColumn(310, 'Stepnr') );
tree.addColumn ( new TreeListControlColumn(45, 'Status') );
tree.addColumn ( new TreeListControlColumn(65, 'Lower Limit') );
tree.addColumn ( new TreeListControlColumn(90, 'Measurement') );
tree.addColumn ( new TreeListControlColumn(65, 'Upper Limit') );
tree.addColumn ( new TreeListControlColumn(55, 'Unit') );
tree.rootNode.setText('','Begin Test Results','',' ');
tree.nLabelColumn = 1;
recursive_BuildTreeForPrintView(xmlroot.firstChild,tree.rootNode,my_string);
my_string += tree;
.
.
.
F1.document.write(s);
F1.document.close();
My Code that works looks like this:
-----------------------------------
var tree = new TreeListControl('TestTree', '../../../dtd_xsl/tlcimages/my_icon_folder.gif', false, false);
//tree.addColumn ( new TreeListControlColumn(20, '') );
tree.addColumn ( new TreeListControlColumn(20, '', true) );
tree.addColumn ( new TreeListControlColumn(310, 'Stepnr') );
tree.addColumn ( new TreeListControlColumn(45, 'Status') );
tree.addColumn ( new TreeListControlColumn(65, 'Lower Limit') );
tree.addColumn ( new TreeListControlColumn(90, 'Measurement') );
tree.addColumn ( new TreeListControlColumn(65, 'Upper Limit') );
tree.addColumn ( new TreeListControlColumn(55, 'Unit') );
tree.rootNode.setText('','Begin Test Results','',' ');
tree.nLabelColumn = 1;
recursive_BuildTree(xmlroot.firstChild,tree.rootNode);
my_string += tree;
DisplayData.innerHTML = my_string;
So the only difference in the code that doesn't work is that I attempt to write the tree to a new Explorer Window instead of writing to the current window.
This Error also occurs when I delete the call of the recursive function, so it has nothing do do with that.
Hope anyone has a clue how to fix it and get it to work.
Hopefully there's a workaround for that problem.
Thanks in Advance,
Mathias
|
|
|
|
|
Could it be that the code is being evaluated in the context of the new window, rather than the existing window, hence TreeListControlHandler.allTrees.6.showRootNode is not defined within that context? Just a thought
|
|
|
|
|
Thanks for answering,
but doesn't the code has to be evaluated in the new Window to display the tree there (in the new window)?
You think I should evaluate the code in the existing window, right? But if I evaluate the code in the existing window, it builds the tree into the existing window which I already have working in another function also mentionend in my question before.
So how do I define the tree or "TreeListControlHandler.allTrees.6.showRootNode" in my new window? Any ideas?
Or am I wrong at that point that I have to do that? Or do I just don't see the wood for the trees?
Appreciate any help on that.
Mathias
|
|
|
|
|
I think I sort of understand what it is you're trying to do. I can see two things that might cause a problem...
1st, try giving your tree a string id, as opposed to a numeric id. "TreeListControlHandler.allTrees.6.showRootNode" is syntactically incorrect because "6" can't be interpreted as a variable.
2nd, have you made sure your popup window actually has access (i.e. a script tag referencing the file) to the treelistcontrol.js file. If you insert jscript code into a popup window, it is not going to automatically have access to all the included jscript code that you have in the calling window.
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
That was partly a solution.
I already included the treelistcontrol.js file in my new window but I just forgot to include the stylesheet too. For that all my data looked scrambled.
So now I have a well looking tree in my new popup window with all the data I need but the problem with the "TreeListControlHandler.allTrees.6.showRootNode is null or no object" MessageBox remains. Actually I just discovered that there are several different error messages in the following order:
2 x TreeListControlHandler.allTrees.6.showRootNode is null or no object
1 x TreeListControlHandler.allTrees.6.showColumnHeadings is null or no object
1 x TreeListControlHandler.allTrees.6.showRootNode is null or no object
1 x TreeListControlHandler.allTrees.6.showColumnHeadings is null or no object
These five error messages occur when the new window is loaded. After that I see my tree, but if I move over the treecontrol with my mouse the errors occur again.
So i.e. I can't expand the tree in the new window.
Additionally if I call my function to display the tree in the new window again the error message changes to:
TreeListControlHandler.allTrees.12.showRootNode is null or no object"
The third time I call that function it changes to:
TreeListControlHandler.allTrees.18.showRootNode is null or no object"
and so on...
I didn't change anything on the original treelistcontrol.js code so far, so that "6" is generated by the treecontrol itself.
If I change the ID in function TreeListControlHandler from 0 to "0" (to a string) nothing changes.
If that might be a problem having a string ID or not, could anyone provide the place where to change that for I'm not sure where and how to do that?
Any other ideas what could call this error messages and how to fix that problem?
Mathias
|
|
|
|
|
I don't mean change the subtype of the variable to string, I mean use an actual non-numeric string for the variable. Instead of using "12", use "ID12", or something like that.
NATHAN RIDLEY
Web Application Developer
email: nathan @ netlab.com.au
[remove the spaces before and after the @ symbol]
|
|
|
|
|
We found that when we moved the Tree control into a Web, we had to change the status check from 0 to 200. In this case we are calling an ASP page to return the XML. We are also seeing a random freeze up on expanding the tree. I don't know if this is related. It times out after about 5 minutes and then just shows blank icons. This was on a few IE6/XP machines .
Here is the change we made. Any ideas on the freeze up?
TreeListControlNode.prototype.xmlCallback = function() {
var failed;
alert(this.xmlhttp.readyState + ":" + this.xmlhttp.status);
if(this.xmlhttp.readyState == 4)
if(this.xmlhttp.status==200) {
var xml = new ActiveXObject("Microsoft.XMLDOM");
if(xml.loadXML(this.xmlhttp.responseText)) {
failed = false;
this.firstChild.remove();
if(xml.documentElement) {
this.addXMLChildNodes(xml.documentElement, this);
}
Brooks
|
|
|
|
|
I've fixed the freeze-up in the latest version. I found, after days of ripping my hair out, that it was an IE-based bug based on using a css class that had no styles declared.
e.g.
.myclass {}
I have emailed you the updated code. Note that it also has some other updates too, like if you leave one column with set to null, the tree will fill the width of its container.
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
I changed the script as shown, but it still shows an 450 status error...
|
|
|
|
|
Nathan,you do a good job,it looks very good
|
|
|
|
|
I'm building up this tree by assigning an "xmlsrc" (which points to an asp page that generates an xml tree document) to each node I add. But sometime when I expand the nodes on the tree for the first time, it seems get lost on calculating the images that precedes the column text. So I'll see all the expanded nodes' texts without any leading images (not even for the parent node). Once this happens my whole tree will be blocked in no time. And it seems the browser is still trying to do something. Then the only thing I can do to get out of this is to kill my browser. It happens irregularly (doesn’t seem to relates to any particular node I expend) so I don't know how to debug. It looks to me it might be some inconsistent timing issue. What do you think and any solution to such a problem? Please help! Thanks!
|
|
|
|
|
Hmm, strange. I've used the tree extensively, including with images in the first column, and I have never had this problem. What version of IE are you using? Have you tried your tree on a different computer to rule out a buggy installation of IE?
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
I'm using IE6. And I tried on other machine it's the same result.
My latest discovery is that if I put an alert statement at the end of the "recalcImages" function to make sure it is done its job every time it's called, then the problem disappears. So, I guess it must because the thread causing a race condition that the program continues too fast even before "recalcImages" can return properly. I tried many things to avoid program continue before "recalcImages" returns in vain. Do you have a solution for that? Thanks!
Iris.
|
|
|
|
|
Good job Nathan!
A few things I found while experimenting:
* On my system (XP), the bottom of the checkboxes were be clipped, which I fixed by a style="height:16px" (or actually, a new class in the stylesheet) when assigning the control text.
* Again, on my system (IIS 5.1), the dynamic XML loading did not work as POST is not an allowed verb on xml files. I instead created a web-service to serve up the XML as this will be generated dynamically anyway. The .NET web service simply returns an XmlNode, which is automatically marshalled by .NET.
* When receiving the results, I got runtime JScript errors due to method not supported. As it turned out, the code was trying to look at attribues of the CDATA sections (which don't have attributes). I fixed this by inserting:
while(x) {
if ( x.nodeType != 4 ) // ignore CDATA sections
{
in addXMLChildNodes.
Again, good job!
Cheers,
Ola
|
|
|
|
|
Version 2 of the tree control states that it requires 5.5 of IE, but Version 3 make no mention of this. I imply from this that Version 3 does require at least 5.5, but I was wondering Version 3 might work with just 5.0. What is it that requires 5.5?
By the way, I have looked at several DHTML controls and your control is about the best I have found for what I want to do!!
_NOSPAM_pobrob@yahoo.com
(remove _NOSPAM_ to send an email)
|
|
|
|
|
version 2 required 5.5 because it used some advanced filters and css stuff to achieve the resizable columns effect. Version 3 does not have this feature at this point.
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
If I have showchildren set to no in a xml and it has children when it loads in the XML in the tree the children will be shown. Is this a known problem?
Bryan
Bryan
|
|
|
|
|
Hmm, I hadn't noticed. Do you mean it draws the xml branch with all the child nodes of that branch expanded?
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
Yes all the branches will be expanded. I have modified your examples files to show you the problem that I'm seeing. If you click on the gG node in the tree you will get the following:
My Testing Tree
[-]gG
[-]6
| |-E
| [+]-I
|
[-]e
|-[+]h
But I would think it would come out like this:
My Testing Tree
[-]gG
[+]6
[+]e
-------------------------------------------------------------------------
Demo.html
-------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tree List Control v3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="treelistcontrol.js"></script>
<link href="treelistcontrol.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
/* margin: 0px;
border: 0px;*/
}
input {
height:12px;
}
</style>
</head>
<body bgcolor="threedface">
<script language="JavaScript">
function addone() {
do {
var n = Math.floor(Math.random() * (tree.allNodes.length-1))+1;
} while(!tree.allNodes[n]);
var parent = tree.allNodes[n];
var o = new TreeListControlNode(false);
o.setText('','<input type="checkbox">','New Node',Math.random(),
'<a href="javascript:removeme(' + o.ID + ');">Remove</a> | <a href="javascript:reassignme(' + o.ID + ');">Reassign</a>');
parent.add(o);
}
function toggleheading() {
tree.showColumnHeadings = !tree.showColumnHeadings;
}
function toggleroot() {
tree.showRootNode = !tree.showRootNode;
}
function removeme(id) {
tree.allNodes[id].remove();
}
function reassignme(id) {
var node = tree.allNodes[id].remove();
var n = Math.floor(Math.random()*2);
if(n)
tree.all['testnode'].insertBefore(node, false);
else
tree.all['testnode'].insertAfter(node, false);
}
tree = new TreeListControl('Test Tree', '');
tree.addColumn ( new TreeListControlColumn(20, '') );
tree.addColumn ( new TreeListControlColumn(20, '', true) );
tree.addColumn ( new TreeListControlColumn(250, 'Labels') );
tree.addColumn ( new TreeListControlColumn(120, 'Stuff') );
tree.addColumn ( new TreeListControlColumn(160, 'Things') );
tree.rootNode.setText('','<input type="checkbox">','My Testing Tree','','?');
tree.nLabelColumn = 2;
var node = new TreeListControlNode(false,null,'test.xml');
node.setText('<b style="color:red; font-size:10pt;">▪</b>','<input type="checkbox">','gG','2','3');
tree.add(node);
document.write(tree);
</script>
<button onclick="addone();">Add One</button>
<button onclick="toggleheading();">Show/Hide Heading</button>
<button onclick="toggleroot();">Show/Hide Root</button>
</body>
</html>
--------------------------------------------------------------------------
Test.xml
--------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<tree>
<node showchildren="no">
<columntext><![CDATA[]]></columntext>
<columntext><![CDATA[<input type="checkbox">]]></columntext>
<columntext><![CDATA[6]]></columntext>
<columntext><![CDATA[5]]></columntext>
<columntext><![CDATA[4]]></columntext>
<children>
<node refkey="" iconsrc="" xmlsrc="" showchildren="no" onclick="">
<columntext><![CDATA[]]></columntext>
<columntext><![CDATA[<input type="checkbox">]]></columntext>
<columntext><![CDATA[E]]></columntext>
<columntext><![CDATA[R]]></columntext>
<columntext><![CDATA[T]]></columntext>
<children />
</node>
<node refkey="" iconsrc="" xmlsrc="http://top01wdt1:8090/workspace/test.xml" showchildren="no" onclick="">
<columntext><![CDATA[]]></columntext>
<columntext><![CDATA[<input type="checkbox">]]></columntext>
<columntext><![CDATA[I]]></columntext>
<columntext><![CDATA[O]]></columntext>
<columntext><![CDATA[P]]></columntext>
<children />
</node>
</children>
</node>
<node refkey="" iconsrc="" xmlsrc="" showchildren="no" onclick="alert(this.innerHTML);">
<columntext><![CDATA[]]></columntext>
<columntext><![CDATA[<input type="checkbox">]]></columntext>
<columntext><![CDATA[e]]></columntext>
<columntext><![CDATA[r]]></columntext>
<columntext><![CDATA[t]]></columntext>
<children>
<node refkey="" iconsrc="http://top01wdt1:8090/web_api/images/icons/icon_user.gif" xmlsrc="test.xml" showchildren="no" onclick="">
<columntext><![CDATA[]]></columntext>
<columntext><![CDATA[<input type="checkbox">]]></columntext>
<columntext><![CDATA[h]]></columntext>
<columntext><![CDATA[j]]></columntext>
<columntext><![CDATA[k]]></columntext>
<children />
</node>
</children>
</node>
</tree>
Bryan
|
|
|
|
|
|
Hi, first of all great work!
just a couple of wishes I would like to see in v4.0
- persistence: saving/loading which nodes are collapsed or not
- highlight the current selected item like windows explorer does
- support for Mozilla/Opera and other browsers
Erwin
|
|
|
|
|
Hi,
A great tree!! But i have one problem: How to save the state when the page reload? I must leave the tree in the state as it was when i return after a submit.
|
|
|
|
|
There is no built-in code at this time that will preserve the state of the tree. I would say that your best bet is to add on a bit of javascript that stores the expand/contract state of each node in a hidden field when the user hits the submit button. Then when you regenerate the tree on the next page, you can set those nodes to be already expanded in your javascript code. You would of course need to use server-side script to write the correct the tree-generating javascript code. A possible and probably easier alterantive is to put the tree in a frame.
NATHAN RIDLEY
Web Application Developer
generalgherkin@yahoo.com
|
|
|
|
|
But hey, Nathan, if it's IE 5+ only then why not implement it as a behavior component (.htc)? Have you not yet discovered this beautiful technique with which to truly componentize your .js files in IE? It really is worth looking into: it's ever so easy to script a versatile component with its own properties, methods and even custom events. Basically you have two flavors to choose from:
1. so-called "attached behaviors" - attach the .htc to any standard HTML element through its style attribute. For example like this:
<DIV ID="myDiv" STYLE="behavior:url(myFirstBehavior.htc)">
2. so-called "element behaviors" - you actually create a new type of html element which renders or does whatever you want it to do! This way requires one extra step: you first need to create your own namespace.
<HTML XMLNS:myNameSpace>
<STYLE>
myNameSpace\:COOLTAG {behavior:url(myFirstBehavior.htc)}
</STYLE>
<BODY>
...
<myNameSpace:COOLTAG>
</myNameSpace:COOLTAG>
...
or <myNameSpace:COOLTAG />
</BODY>
</HTML>
Cheers, Nick.
P.s. drop me a line if you need more to get you going on IE .htc's
_nick_NOSPAM_@reeleezee.com (remove first underscore and _NOSPAM_)
|
|
|
|
|
right!
|
|
|
|
|