SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Location
    Gothenburg, Sweden
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX updating multiple div's

    What's the easiest way to update multiple div's with AJAX?

    Right now I'm using the following code to update one div, but right after I've updated that div I would need to update another div that is dependent on the first div that is updated.

    Code:
    function ajax(var) {
    	var ajaxRequest;  // The variable that makes Ajax possible!
    	
    	try{
    		// Opera 8.0+, Firefox, Safari
    		ajaxRequest = new XMLHttpRequest();
    	} catch (e){
    		// Internet Explorer Browsers
    		try{
    			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			try{
    				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e){
    				// Something went wrong
    				alert("Your browser doesn't support AJAX.");
    				return false;
    			}
    		}
    	}
    	// Create a function that will receive data sent from the server
    	var divId="var-" + var;
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			var ajaxDisplay = document.getElementById(divId);
    			ajaxDisplay.innerHTML = ajaxDisplay.innerHTML + ajaxRequest.responseText;
    		}
    	}
    	
    	var queryString = "?foo=" + var;
    	ajaxRequest.open("GET", "ajax-functions.php" + queryString, true);
    	ajaxRequest.send(null); 
    }

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2006
    Location
    Gothenburg, Sweden
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nobody?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well there are a few ways to do that, here are a couple of options:

    - Have your PHP page return XML or JSON that contains data for each div you want to change, and update each one in the onreadystatechange handler.

    or

    - From the onreadystatechange handler, call another ajax request for the next div once the first has completed.

    I'd think that the best way is to let PHP handle the determination of what content to display and use simpler javascript to just get the data.


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
  •