SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to update 6 divs using ajax?

    Hi
    I have a small form which allows the user to make a selection from two drop down menus.
    What I need to do is update 6 div contents.
    Each div shows the number of relevant rows in the database which match the users selections from the form.
    I can work out how to update 1 div based on the script below but I don't know how to update several divs.

    Can someone please help me with this as its the last part I need to get working on this page.

    Code JavaScript:
    function showBigTotals(){
    	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 broke!");
    				return false;
    			}
    		}
    	}
    	// Create a function that will receive data sent from the server
    	ajaxRequest.onreadystatechange = function(){
    		if(ajaxRequest.readyState == 4){
    			var ajaxDisplay = document.getElementById('startResults');
    			ajaxDisplay.innerHTML = ajaxRequest.responseText;
    		}
    	}
    	var big_make = document.getElementById('big_make').value;
    	var big_model = document.getElementById('big_model').value;
    	var big_min_price = document.getElementById('big_min_price').value;
    	var big_max_price = document.getElementById('big_max_price').value;
    	if (document.getElementById("big_pics").checked==true) {
    		var photos = "Yes";
    	}
    	else {
    		var photos = "No";
    	}
     
    	var queryString = "?big_make=" + big_make + "&big_model=" + big_model + "&big_min_price=" + big_min_price + "&big_max_price=" + big_max_price + "&photos=" + photos;
    	ajaxRequest.open("GET", "count.php" + queryString, true);
    	ajaxRequest.send(null); 
    }

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var ajaxDisplay = document.getElementById('startResults');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;

    Why can't You parse the answer here and do specific action for each div?
    http://www.yourshoutbox.com <- FREE chat for your website - limited offer
    http://www.smartchatbox.com <- let your visitors talk

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response but I don't understand what you mean.
    Its been a while since I set up the original code for 1 div and I don;t use js as much anymore.
    Could you possibly explain to me with some quick code what you mean please?

    Would really apprecaite the help.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can get my php script to work as it should based on the drop sown selections.
    I can get the script to pull back the data I need into 1 div but I don't understand how to adapt the code to update the 6 differnet divs with their relevant values.
    All that will be changing in the divs will be a number.

    Can anyone help please?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sketchgal View Post
    I can get my php script to work as it should based on the drop sown selections.
    I can get the script to pull back the data I need into 1 div but I don't understand how to adapt the code to update the 6 differnet divs with their relevant values.
    All that will be changing in the divs will be a number.

    Can anyone help please?
    You would have PHP provide the six pieces as an array (using json_encode() to convert the array to an appropriate output format) so that from javascript you can use JSON.parse() (from json2.js) on the responseText and assign it to a data variable, so that you can apply each part of that data array to each appropriate div.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Paul, I'll have a go at what you suggested and see how I get on.


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
  •