SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Europe
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX, not getting all responses

    Hi. I havent got much exp in AJAX.

    Im writing the ajax script. Its purpose is to preload tree nodes when a user opens a parent node. So the nodes are requested when user opens parent node. It work great, but when i instantly trying to open several nodes in a tree, its just preloading the nodes for last one opened.

    I found that the problem is that onreadystatechange function is called only for last request if previos request hadnt still got response.

    I extracted only ajax code.
    I know its a little bit much.


    Code:
    <html>
    <head>
    	<title>Hello world!</title>
    	<link rel="StyleSheet" href="dtree.css" type="text/css" />
    	<script type="text/javascript" src="dtree.js"></script>
    <script type="text/javascript">
    function ajaxDTree () {}
    
    ajaxDTree.prototype = new dTree('d');
    
    ajaxDTree.prototype.o = function(id) {
    	this.requestNodes(this.aNodes[id].id);
    	dTree.prototype.o.call(this, id);
    }
    
    ajaxDTree.prototype.add = function (id, pid, name, url, title, target, icon, iconOpen, open) {
    
    	dTree.prototype.add.call(this, id, pid, name, url, title, target, icon, iconOpen, open);
    }
    
    ajaxDTree.prototype.processResponse = function(httpObject) {
    	if(httpObject.readyState == 4 && httpObject.status == 200) {
    		if(response = httpObject.responseText)	{
    			var nodes = eval( "(" + response + ")" );
    			for(var i=0; i < nodes.length; i++) {
    				var node = nodes[i];
    				d.add(node.id, node.pid, node.name, node.url);
    			}
    			document.getElementById('tree1').innerHTML = d.toString();
    		}
    	} 
    }//end of function
    
    ajaxDTree.prototype.requestNodes = function (id) {
    	httpObject = getHTTPObject();    
    	
    	if (httpObject != null) {
    	
    		if(id.constructor.toString().indexOf("Array") == -1) {
    			id = Array([id]);
    		}
    		var nodes = '';
    		for(var i=0; i < id.length; i++) {
    			nodes += id[i] + ',';
    		}
    		 
    		var url = "menugen.php?nodes="+ nodes;
    		url += "&r="+Math.random();
    		httpObject.open("GET", url , true);        
    		httpObject.send(null);     
    
    		var ajaxDTree = this;
    		httpObject.onreadystatechange = function() {
    			
    			ajaxDTree.processResponse(httpObject);
    		}
    	}
    }
    
    function getHTTPObject() {  
    	if (window.ActiveXObject) {
    		return new ActiveXObject("Microsoft.XMLHTTP"); 
    	} 
    	else if (window.XMLHttpRequest) {
    		return new XMLHttpRequest();
    	}
    	else {      
    		alert("Your browser does not support AJAX.");      
    		return null;   
    	}
    }
    </script>
    </head>
    <body>
    
    <h1>Hello World!</h1>
    <h2>Example</h2>
    
    <div class="dtree">
    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a> | <a href="javascript:">Draw</a></p>
    <div id="tree1"></div>
    <script type="text/javascript">		
    	d = new ajaxDTree();
    	d.closeAll();
    	d.add(0,-1,'Head1');	
    	d.add(1,-1,'Head2');	
    	d.add(2,-1,'Head3');	
    	d.add(3,-1,'Head4');	
    	d.add(4,-1,'Head5');	
    	d.requestNodes(Array(0, 1, 2, 3, 4));
    </script>
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you confirm that ajaxDTree in requestNodes is correct each time its called? I'd suggest using Firebug and Firefox to debug javascript.

    Do you have a page we can look at?

    One last question, why are you using javascript to populate the nodes on load? You can use PHP to do this on page load.


  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that you are overwriting the entire tree in the onreadystatechange handler. So you might have 2 requests being processed but only the last one will be reflected in the tree, as the first is overwritten.

    Here's an example of the problem:
    - click a node to retrieve via ajax subnodes
    - http request 1 goes off to get them
    - click another node
    - http request 2 goes off
    - http request 1 finishes, onreadystatechange fires and this piece of code:
    document.getElementById('tree1').innerHTML = d.toString();
    replaces the tree with its new form
    - http request 2 finishes and again replaces the tree with another new form, overwriting the first change

    Maybe you could overwrite only the part of the tree affected by the click? Either that, or use DOM to add the html nodes manually rather than innerHTML.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Europe
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced
    httpObject = getHTTPObject();
    to
    var httpObject = getHTTPObject();
    and it all worked perfect.

    Without var httpObject assumed to be a global var.

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mikle View Post
    I replaced
    httpObject = getHTTPObject();
    to
    var httpObject = getHTTPObject();
    and it all worked perfect.

    Without var httpObject assumed to be a global var.
    Hi Mikle,

    Would you be so kind to post the Php page you use to create all of this. I intend to build a dynamic dtree with ASP. Any help would be great!!


Bookmarks

Posting Permissions

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