• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

Update page information without refreshing

I want to show the number of items in my shopping cart and update it at the moment customer add another item in to the cart without refreshing the page. I am using the mysql database to keep all the everything works great except the total number of items in the shoping cart update only when I refresh the page (read the data from the database). How can I solve this problem without using iframes.
  • 2
1 Solution
This sounds like a job for AJAX.

Say you have a SPAN or DIV with the ID of "totalitems" (this can be a textbox as well). You could use AJAX to update it "behind the scenes" like this.

=== Javascript ===
var ie5 = (document.getElementById && document.all); 
var ns6 = (document.getElementById && !document.all); 
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function createRequestObject() {
	var ro;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer") {
		ro = new ActiveXObject("Microsoft.XMLHTTP");
	else {
		ro = new XMLHttpRequest();
	return ro;
function getTotalItems() {
	var ge = createRequestObject();
	var rn = Math.floor(Math.random() * 1000); // Don't get cached data
	ge.open('get', 'aj_gettotalitems.php?rn=' + rn);
	ge.onreadystatechange = function() {
		if(ge.readyState == 4) {
			// Use this if you are updating a SPAN or DIV
			document.getElementById('totalitems').innerHTML = ge.responseText;
			// Use this if you are updating a textbox
			//document.getElementById('totalitems').value = ge.responseText;
			ge = null;
=== PHP ===
The PHP script called in the function above (aj_gettotalitems.php) should return the number of items in the cart. This is where it reads the database, does a little magic, and spits out the total thus far.
=== HTML ===
Your HTML should include an "onclick", "onchange", or whatever to call the getTotalItems() function. I imagine this would be the button or link the user clicks to add something to their cart.
More info on AJAX can be found here:
Or on Google:

Open in new window

you mite also want to check out this site http://jibbering.com/2002/4/httprequest.html (about 2/3 way down page 'Calling a server-side Script without refreshing the page')

I also came across this in the past: http://developer.apple.com/internet/webcontent/xmlhttpreq.html

I use to have a great link but lost it :(

Let me know if either of these links are of any use to you
ppeirisAuthor Commented:
The AJAX script is working for me but still have a small problem. I being a floating div tag (Using thickbox) to add items in to the shopping cart, when it is done you can close the thickbox but i don't know how to call a javascript function in thickbox that update the contents in the main window ?

Thank you

What method are you using to close the window (box)? I have never used thickbox but I would look for the code that is executed when the window is closed and add a line to call the function there.

If the thickbox is closed via a link chances are it's Javascript performing the close. That being the case, have it call the function at that time.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now