Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Refresh the page

    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!!!

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Post your code.

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NancyJ View Post
    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>

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • Users who have thanked A1ien51 for this post:

    Basscyst (02-26-2008)

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by A1ien51 View Post
    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.
    Helping to build a bigger box. - Adam Matthews

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,380
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    nikku (03-04-2008)

  • #8
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by rnd me View Post
    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.
    Helping to build a bigger box. - Adam Matthews

  • Users who have thanked Basscyst for this post:

    nikku (03-04-2008)

  • #9
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the reply,

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

  • #10
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    IMHO = In my humble opinion.
    Helping to build a bigger box. - Adam Matthews

  • #11
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Basscyst View Post
    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!!!

  • #12
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • Users who have thanked A1ien51 for this post:

    nikku (03-04-2008)

  • #13
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    It is faster, but you have much more control over your data using the DOM. Both have their advantages.
    Helping to build a bigger box. - Adam Matthews

  • Users who have thanked Basscyst for this post:

    nikku (03-04-2008)

  • #14
    New Coder
    Join Date
    Feb 2008
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the input,

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

    cheers!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •