Link to home
Start Free TrialLog in
Avatar of ims1010
ims1010

asked on

Update four divs with one javascript ajax call

Hi there,

I'm writing a registration form script for a conference that uses AJAX to calculate the total.  There are four fields (divs), which need updating after a calculation is run.  The fields being calculated are:

- Conference Total
- Post Conference Course Total
- Subtotal (the sum of the conference Total and Post conference Total)
- Grand Total (the subtotal plus any applicable taxes).

I've attached a screenshot of the fields which are updated
 User generated image
Please note how the conference total is calculated correctly at $585, but the subtotal and total show as $0.00.  You will also see I have echoed my SQL queries to help in my debugging.  Running the query in the database shows that 585 is entered in as the conference total in the database, but the code that calculates the subtotal and total isn't pulling the correct amount from the database in this example (but in other test registrations it is working).

My Ajax code calls PHP scripts which update a database and then calculates the subtotal and grand total based on the data in the database.  The code always seems to calculate and Conference Total and Post Conference Course total and updates the corresponding divs correctly.  However, the subtotal and Grand Total are only correct about 75% of the time.  The database also seems to be updated correctly, but for some reason the scripts called to calculate the subtotal and grand total aren't pulling the correct data from the database.  My suspicion is there is something incorrect with the way my AJAX is put together that is causing the issues.  I've attached my AJAX code for reference.

I've been banging my head over this for a while, so any help is greatly appreciated.

Thanks!




function calculateTotal(){
	
  var ajaxRequest1;  // The variable that makes Ajax possible!
  var ajaxRequest2;
  var ajaxRequest3;
  var ajaxRequest4;
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest1 = new XMLHttpRequest();
		ajaxRequest2 = new XMLHttpRequest();
		ajaxRequest3 = new XMLHttpRequest();
		ajaxRequest4 = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
			ajaxRequest2 = new ActiveXObject("Msxml2.XMLHTTP");
			ajaxRequest3 = new ActiveXObject("Msxml2.XMLHTTP");
			ajaxRequest4 = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
				ajaxRequest2 = new ActiveXObject("Microsoft.XMLHTTP");
				ajaxRequest3 = new ActiveXObject("Microsoft.XMLHTTP");
				ajaxRequest4 = 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
	ajaxRequest1.onreadystatechange = function(){
		if(ajaxRequest1.readyState == 4 && ajaxRequest1.status == 200){
			var ajaxDisplay = document.getElementById('total');
			ajaxDisplay.innerHTML = ajaxRequest1.responseText;	      
      
      document.getElementById("total").style.display = "block";
      document.getElementById("total_postconference").style.display = "block";
      document.getElementById("total_subtotal").style.display = "block";
      document.getElementById("calculate_total_textlink").style.display = "none";
      
        
		}
	}
	
	
	var num_attendees = document.getElementById("num_attendees").value;
  	
  var queryString = "?num_attendees=" + escape(num_attendees);   
	
  ajaxRequest1.open("GET", "include_calculatetotal.php" + queryString, true);
  ajaxRequest1.setRequestHeader("If-Modified-Since", "Thu, 1 Jan 1970 00:00:00 GMT");
  ajaxRequest1.setRequestHeader("Cache-Control", "no-cache"); 
  ajaxRequest1.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest1.setRequestHeader("Content-length", queryString.length);
  ajaxRequest1.setRequestHeader("Connection", "close"); 
  
	
	
	//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	// Create a function that will receive data sent from the server
	ajaxRequest2.onreadystatechange = function(){
		if(ajaxRequest2.readyState == 4 && ajaxRequest2.status == 200){
			var test123 = document.getElementById("total_postconference");
			test123.innerHTML = ajaxRequest2.responseText;
      
      ajaxRequest1.send(null);
      
		}
	}
	
	
  var queryString2 = "?num_attendees=" + num_attendees;  
    
  
	ajaxRequest2.open("GET", "include_calculate_postconference_total.php" + queryString2, true);
	ajaxRequest2.setRequestHeader("If-Modified-Since", "Thu, 1 Jan 1970 00:00:00 GMT");
  ajaxRequest2.setRequestHeader("Cache-Control", "no-cache"); 
  ajaxRequest2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest2.setRequestHeader("Content-length", queryString2.length);
  ajaxRequest2.setRequestHeader("Connection", "close"); 
	
	
	
	
	//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
  
  // Create a function that will receive data sent from the server
	ajaxRequest3.onreadystatechange = function(){
		if(ajaxRequest3.readyState == 4 && ajaxRequest3.status == 200){
			var ajaxDisplay = document.getElementById('total_subtotal');
			ajaxDisplay.innerHTML = ajaxRequest3.responseText;	      
      
      ajaxRequest2.send(null);
      
     
        
		}
	}
	
		  	
  var queryString3 = ""; 
  ajaxRequest3.open("GET", "include_calculate_subtotal.php" + queryString3, true);
  ajaxRequest3.setRequestHeader("If-Modified-Since", "Thu, 1 Jan 1970 00:00:00 GMT");
  ajaxRequest3.setRequestHeader("Cache-Control", "no-cache"); 
  ajaxRequest3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajaxRequest3.setRequestHeader("Content-length", queryString3.length);
  ajaxRequest3.setRequestHeader("Connection", "close");  
	
	
	
	
		// Create a function that will receive data sent from the server
	ajaxRequest4.onreadystatechange = function(){
		if(ajaxRequest4.readyState == 4 && ajaxRequest4.status == 200){
			var ajaxDisplay = document.getElementById('grand_total');
			ajaxDisplay.innerHTML = ajaxRequest4.responseText;	      
      
      document.getElementById("grand_total").style.display = "block";
      
      ajaxRequest3.send(null);
      
        
		}
	}

	
  	
  var queryString = ""; 
  ajaxRequest4.open("GET", "include_calculate_grandtotal.php" + queryString, true);
  ajaxRequest4.setRequestHeader("If-Modified-Since", "Thu, 1 Jan 1970 00:00:00 GMT");
  ajaxRequest4.setRequestHeader("Cache-Control", "no-cache");  
	ajaxRequest4.send(null);
	
	
	
	}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of xlt77
xlt77

Maybe here :  if(ajaxRequest4.readyState == 4 && ajaxRequest4.status == 200){

if ajaxRequest4.status changes after onreadystatechange() event, the code should randomly return false;

The better way is check responseText;
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
yes, as I said earlier
>>Ajax is asynchronous...

It can be synchronous, too.
"yes, as I said earlier"

I know, but I felt that the explanation "It is not optimal to do more than one ajax call" was a bit on the thin side and so I expanded on it, although I probably could have dropped the JSON bit.

To be honest (since I'm in an expansive mood) I have to say that I don't like JSON due to the way it is usually evaluated via an EVAL which could do just about anything to your code. I usually use implode() in PHP and split() in javascript to avoid the security issues that JSON can raise.
There is built-in JSON support for IE (and FF?) I believe. No "eval" is used, although there are implementations of JSON that do not rely on eval.
And I must say, JSON is far easier to use than XML, which it is intended to replace.
Avatar of ims1010

ASKER

Thanks for your responses so far - much appreciated!   I'm looking into using JSON and will post further comments/award points shortly.  Thanks!
Avatar of ims1010

ASKER

Thanks for the help!  I ended up using JSON and it works great.   mplungjan provided the roadmap, but i did find the comments bportlock provided helpful as well (especially the JSON encoded tip).
Cheers!