Refresh the page

nikku · 02-22-2008, 10:55 AM

hello,

I am trying to write a script which reads an xml file and creates an expand and collapse tree structure.

The content of the xml file can keep changing continuosly and my code should be able to take care of it.

Any suggestions on how to do it. I have tried using setInterval() and setTimeout() but not with much success.

Can any one suggest on how to go about it .

Cheers!!!

NancyJ · 02-22-2008, 04:47 PM

Post your code.

nikku · 02-25-2008, 04:14 AM

Quote:

Originally Posted by NancyJ

Post your code.

Code:

<html>
<head>
<style>
body{
	font: 10pt Verdana,sans-serif;
	color: navy;
}
.branch{
	cursor: pointer;
	cursor: hand;
	display: block;
}

.leaf{
	display: none;
	margin-left: 16px;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
</style>
<script language="JavaScript">
	var openImg = new Image();
	openImg.src = "open.gif";
	var closedImg = new Image();
	closedImg.src = "closed.gif";
	var req;
	var xmlDoc;
	function loadxml(url)
	{
			req = false;

		var moz = (typeof document.implementation != 'undefined') && (typeof
					document.implementation.createDocument != 'undefined');

		var ie = (typeof window.ActiveXObject != 'undefined');

		if (moz){ xmlDoc = document.implementation.createDocument("", "", null) ;}


    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
    	try {
			req = new XMLHttpRequest();
			if(req.overrideMimeType){

					req.overrideMimeType('text/xml');
					}

        } catch(e) {
			req = false;
        }

    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject)
      {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
            }
      	catch(e)
      	    {
        	   try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	       }
        	   catch(e)
        	       {
          		req = false;
        	        }
		    }
      }

	if(req){
		req.open("GET", url, true);
		req.onreadystatechange = stateChanged;		
		req.send(null);
		}
    }
function stateChanged()
	{   

		if (req.readyState==4 && req.status==0)
			{
			  xmlDoc=req.responseXML;
			  var xmlobj=xmlDoc.getElementsByTagName("branch");  			 
                        drawtree();            

		    }
		 else{
		     alert.write(req.status);
		     }
	}

function tree(){
	this.branches = new Array();
	this.add = addBranch;
	this.write = writeTree;
}


function branch(id, text){
	this.id = id;
	this.text = text;
	this.write = writeBranch;
	this.add = addLeaf;
	this.leaves = new Array();
}


function leaf(text, link){
	this.text = text;
	this.link = link;
	this.write = writeLeaf;
}

function writeTree(){
	var treeString = '';
	var numBranches = this.branches.length;
	for(var i=0;i<numBranches;i++)
		treeString += this.branches[i].write();
	document.write(treeString);
}

function addBranch(branch){
	this.branches[this.branches.length] = branch;
}

function writeBranch(){
	var branchString = '<span class="branch" onClick="showBranch(\'' + this.id + '\')"';
	branchString += '><img src="closed.gif" id="I' + this.id + '">' + this.text;
	branchString += '</span>';
	branchString += '<span class="leaf" id="';
	branchString += this.id + '">';
	var numLeaves = this.leaves.length;
	for(var j=0;j<numLeaves;j++)
		branchString += this.leaves[j].write();
	branchString += '</span><br>';
	return branchString;
}

function addLeaf(leaf){
	this.leaves[this.leaves.length] = leaf;
}

function writeLeaf(){
	var leafString = '<a target="page12" href="' + this.link + '">';
	leafString += '<img src="doc.gif" border="0">';
	leafString += this.text;
	leafString += '</a><br>';
	return leafString;
}

function showBranch(branch){
	var objBranch = document.getElementById(branch).style;
	if(objBranch.display=="block")
		objBranch.display="none";
	else
		objBranch.display="block";
	swapFolder('I' + branch);
}

function swapFolder(img){
	objImg = document.getElementById(img);
	if(objImg.src.indexOf('closed.gif')>-1)
		objImg.src = openImg.src;
	else
		objImg.src = closedImg.src;
}

function drawtree(){

var i,j;

var myTree = new tree();

var branch_var=xmlDoc.getElementsByTagName("branch");



	for(i=0;i<branch_var.length;i++)
		{
			var branch_comm = new branch(branch_var[i].firstChild.nodeValue,branch_var[i].firstChild.nodeValue);

			var leaf_var=branch_var[i].getElementsByTagName("leaf");
			
				for(j=0;j<leaf_var.length;j++)
					{
					 var link_var=leaf_var[j].getElementsByTagName("link");

					 var leaf_comm= new leaf(leaf_var[j].firstChild.nodeValue,link_var[0].firstChild.nodeValue);					
					 branch_comm.add(leaf_comm);

					}

			myTree.add(branch_comm);
		}




myTree.write();


}


</script>
</head>

<body onload=loadxml("x1.xml")>
</body>
</html>

A1ien51 · 02-25-2008, 06:40 PM

Well first thing is req.status==0 is for working offline on the local file system. So if you try throwing this on a server, it will break.

You never really said what the problem was. I am guessing you are not seeing the updated xml?

If you are not seeing updated info you need to tell the computer not to fetch the file from the cache. Here is an easy way to do it below.

Code:

xmlhttp.open("GET", theURL ,true); 
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); xmlhttp.send();

Eric

Basscyst · 02-26-2008, 02:55 AM

Quote:

Originally Posted by A1ien51

Well first thing is req.status==0 is for working offline on the local file system. So if you try throwing this on a server, it will break.

You never really said what the problem was. I am guessing you are not seeing the updated xml?

If you are not seeing updated info you need to tell the computer not to fetch the file from the cache. Here is an easy way to do it below.

Code:

xmlhttp.open("GET", theURL ,true); 
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); xmlhttp.send();

Eric

Ooh, that's nice Eric. I just append the current date and time to my post / get string. That's a much more elegant solution.

nikku · 02-26-2008, 04:41 AM

Thanks A1ien51,Basscyst

I will try what both of you have suggest.

I am using local file system and manually changing my xml on the run.

The problem i am facing is that , i am trying to refresh my tree structure with function
setInterval() or setTimeOut() .

But my code hangs after the first refresh and the error on firefox says showbranch() function not found.

rnd me · 02-26-2008, 09:14 AM

document.write cannot be used to refresh your tree, only to create a new one on a new page,
thus destroying any variables and functions you had in memory at the time the write happens.

document.write, when called after the page loads, "reboots" the javascript,
and if the text you print has no script, no functions are available.

use innerHTML instead.

Basscyst · 02-26-2008, 07:35 PM

Quote:

Originally Posted by rnd me

document.write cannot be used to refresh your tree, only to create a new one on a new page,
thus destroying any variables and functions you had in memory at the time the write happens.

document.write, when called after the page loads, "reboots" the javascript,
and if the text you print has no script, no functions are available.

use innerHTML instead.

Use appendChild() and return xml whenever possible IMHO.

nikku · 02-27-2008, 04:40 AM

Thanks for the reply,

@Basscyst
I will try it out but i really didnt understand what you meant in your reply(IMHO?)

Basscyst · 02-27-2008, 06:41 PM

IMHO = In my humble opinion.

nikku · 03-03-2008, 12:47 PM

Quote:

Originally Posted by Basscyst

Use appendChild() and return xml whenever possible IMHO.

Thanks a lot for the reply,

I tried the innerHTML tag. The page refresh is working. But when investigating about it i came to know that it is not a w3c standard and its better to use appendchild and properties like that.

@Basscyst
Can you give me link where they have showed some sample code on how to use appendchild and such other properties for dynamic webpages.

Cheers!!!

A1ien51 · 03-03-2008, 02:52 PM

You are going to find out that using appendChild is a lot slower than innerHTML. As a person that code JS for a living, I would not live by what W3C says.

Eric

Basscyst · 03-03-2008, 05:17 PM

It is faster, but you have much more control over your data using the DOM. Both have their advantages.

nikku · 03-04-2008, 04:11 AM

Thanks for the input,

I was looking for some useful links for online tutorial which can be useful.

cheers!!!