Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1814

Aug 5th, 2008

AJAX td?

Expand Post »

Alright ran into a bit of a problem on the item count in my index... let me give you the layout I'm working with.

I've got my index page with the header logo and navigation bar. This is followed by an Iframe. When I click the navigation buttons it changes to Iframe to show a new webpage.

The problem I'm having is, I have a <td> in the top part of the Index (page never changes) that has a text element inside of it that calls a PHP function to show the number of items I have in the cart. So I have to reload the main page, which reloads everything back to the start in order to see the number of items.

This is the function is case you were wondering

php Syntax (Toggle Plain Text)
function total_items(){
  global $sid;
  if($_SESSION["loggedin"]==1){
    $q1=mysql_query("SELECT SUM(qty) as total_items FROM cart_items WHERE uid='{$_SESSION["user_id"]}'");
  }else{
    $q1=mysql_query("SELECT SUM(qty) as total_items FROM cart_items WHERE session='$sid'");
  }
  $r1=mysql_fetch_array($q1);
  return $r1["total_items"];
}
function total_items(){
  global $sid;
  if($_SESSION["loggedin"]==1){
    $q1=mysql_query("SELECT SUM(qty) as total_items FROM cart_items WHERE uid='{$_SESSION["user_id"]}'");
  }else{
    $q1=mysql_query("SELECT SUM(qty) as total_items FROM cart_items WHERE session='$sid'");
  }
  $r1=mysql_fetch_array($q1);
  return $r1["total_items"];
}

and this is how I call it in just the text area:

html Syntax (Toggle Plain Text)
<td><font color="#000000">(<?= total_items(); ?> items)</font></td>
<td><font color="#000000">(<?= total_items(); ?> items)</font></td>

my friend had mentioned something about AJAX, but I'm not too familiar with the blending of fields.

I appreciate any info I can get, even if its just a link to something to look up.

Similar Threads

AJAX : Am i right with the concept? in JavaScript / DHTML / AJAX
New Ajax Tutorial in IT Professionals' Lounge

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 5th, 2008

Re: AJAX td?

I got started with AJAX a couple of months ago and I love it.. There are few websites out there that have good tutorials, however, I have been using the same script for awhile, maybe this will help you get a feel for AJAX and say no more iframes!

There are three elements to my AJAX script

1. The main page, or page you are displaying
2. a javascript page, which is called into the main page
3. the results php page, which will display in a div on the main page right before your eyes

main page (hello_world.php)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script language="JavaScript" src="world.js"></script>
<?php
//php code here 
$variable_from_page = "just an example variable";
?>
 
<div id="div_world"></div><br>
<a href="#" onclick="world('<? echo "$variable_from_page"; ?>');">Click for AJAX</a>
<script language="JavaScript" src="world.js"></script>
<?php
//php code here 
$variable_from_page = "just an example variable";
?>

<div id="div_world"></div><br>
<a href="#" onclick="world('<? echo "$variable_from_page"; ?>');">Click for AJAX</a>

Javascript page (world.js)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var xmlHttp
function world(variable_from_form)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="world.php"
//this passes the variable to world.php via get variable, you can add as many as you want
url=url+"?variable_from_form="+variable_from_form+"&"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("div_world").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
var xmlHttp
function world(variable_from_form)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="world.php"
//this passes the variable to world.php via get variable, you can add as many as you want
url=url+"?variable_from_form="+variable_from_form+"&"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("div_world").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

And finally the page that will display in the div (world.php)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?php
$variable = $_GET['variable_from_form'];
//even though we have the variable from form I will output hello
//I just brought this variable along to show how to get it from the main page to the div
echo "Hello World";
//you can exicute any code here and it will output in the div where world went
?>
<?php
$variable = $_GET['variable_from_form'];
//even though we have the variable from form I will output hello
//I just brought this variable along to show how to get it from the main page to the div
echo "Hello World";
//you can exicute any code here and it will output in the div where world went
?>

gralex07

Reputation Points: 11

Solved Threads: 2

Newbie Poster

Offline

2 posts
since Aug 2008

Permalink

Aug 5th, 2008

Re: AJAX td?

interesting... it seems this may be easier than I tlhought.

Thanks alot for the info, greatly appreciated.

I'll play around with it a bit and see what I can't get working.

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 6th, 2008

Re: AJAX td?

heh, not as easy as I thought...

After toying with this for some time, what I've managed to do is make the small area change from the original text "(# items)" into a table the same size as the area before (turns it from words to a blanks spot). This at least accomplishs the task of only changing the one area instead of the entire site.

I'm not familiar enough with the syntax for writing javascripts or XML calls, I'm learning as I go. Maybe I messed up my echo, maybe the script itself, I'm not sure. Hopefully you can see the problem?

This is what I use on the main page holding the div (index.php):
I'm calling "total_items()" from my config.php

php Syntax (Toggle Plain Text)
<script language="JavaScript" src="itemcount_revert.js"></script>
...
<? 
$cartNumbers = total_items();
?>
...
<td width="50" height="20"><div id="cart_count"><font color="#000000">(<?= $cartNumbers; ?> items)</font></div></td>
<td><a href="#" onclick="itemcount_revert(<? $cartNumbers; ?>);">Click for AJAX</a></td>
<script language="JavaScript" src="itemcount_revert.js"></script>
...
<? 
$cartNumbers = total_items();
?>
...
<td width="50" height="20"><div id="cart_count"><font color="#000000">(<?= $cartNumbers; ?> items)</font></div></td>
<td><a href="#" onclick="itemcount_revert(<? $cartNumbers; ?>);">Click for AJAX</a></td>

This is the .js (itemcount_revert.js):

javascript Syntax (Toggle Plain Text)
var xmlHttp
function itemcount_revert($cartNumbers)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="world.php"
url=url+"?$cartNumbers="+$cartNumbers+"&"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("cart_count").innerHTML=xmlHttp.responseText 
 } 
}
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
var xmlHttp
function itemcount_revert($cartNumbers)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="world.php"
url=url+"?$cartNumbers="+$cartNumbers+"&"
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("cart_count").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

and this is the site displayed inside the div (world.php)

php Syntax (Toggle Plain Text)
<?
$cartFinal = $_GET['cartNumbers'];
 
echo ("<table height=\"20\" width=\"40\">\n");
echo ("<tr>\n");
echo ("<td>.$cartFinal\n");
echo ("</td>\n");
echo ("</tr>\n");
echo ("</table>\n");
?>
<?
$cartFinal = $_GET['cartNumbers'];

echo ("<table height=\"20\" width=\"40\">\n");
echo ("<tr>\n");
echo ("<td>.$cartFinal\n");
echo ("</td>\n");
echo ("</tr>\n");
echo ("</table>\n");
?>

If I use "echo ("<td>.$cartFinal\n");" it comes back undefined. If I use "echo ($cartFinal);" it comes up blank.

By the way... is there any way I could possibly find a snippet to make it auto refresh every so often instead of having to submit or hit a link? (meta on the world.php maybe?, java refresh maybe?) could use a bit of help on this one too if you have the time =)

Last edited by PsychicTide; Aug 6th, 2008 at 8:42 am.

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 6th, 2008

Re: AJAX td?

is problem solved or not

nikesh.yadav

Reputation Points: 15

Solved Threads: 21

Posting Whiz in Training

Offline

219 posts
since Feb 2008

Permalink

Aug 6th, 2008

Re: AJAX td?

just posted that... have any ideas?

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 6th, 2008

Re: AJAX td?

Using Ajax to update one number is like killing a gnat with a sledgehammer ... unless you plan on using Ajax to update your page (cart) content as well -- in which case you might lose people who have javascript turned off in their browser.

Why don't you pass the item count value in with the iFrame document and use some javascript to update the value in the iFrame's parent document?

Something like this in the iFrame updated document would work

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<head>
<script type="text/javascript">
parent.document.getElementById('item_count').firstChild.nodeValue = '12 items';
</script>
</head>
<head>
<script type="text/javascript">
parent.document.getElementById('item_count').firstChild.nodeValue = '12 items';
</script>
</head>

And you would have your static (parent) document with the menu bar and item count printout look like this

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<body>
<a href="updated.html" target="iframe">update cart</a>
<p id="item_count">0 items</p>
<iframe name="iframe" src="default.html"></iframe>
</body>
<body>
<a href="updated.html" target="iframe">update cart</a>
<p id="item_count">0 items</p>
<iframe name="iframe" src="default.html"></iframe>
</body>

So when you load the new document, it automatically updates your item count.

Hope this helps

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: AJAX td?

No luck using the method you posted, but thanks alot for the response Langsor.

With the current setup, I can get the box text change to say "(undefined items)", but not understanding where the variable is getting lost.

This is the world.php as of now:

php Syntax (Toggle Plain Text)
<?
$cartFinal = $_GET['cartNumbers'];
 
echo ("<font color=\"#000000\">(".$cartFinal." items)</font>");
?>
<?
$cartFinal = $_GET['cartNumbers'];

echo ("<font color=\"#000000\">(".$cartFinal." items)</font>");
?>

Index and itemcount_revert are the same... any ideas?

I kind of like the sledghammer approach... can use this stuff for later projects

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: AJAX td?

I admit, it's good to learn how to use the asynchronous http objects ... I did test my approach and it does work and is very easy to implement (compared to what you're doing) so if you change your mind let me know.

I noticed in post #4 from you above

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script language="JavaScript" src="itemcount_revert.js"></script>
...
<? 
$cartNumbers = total_items();
?>
...
<td width="50" height="20"><div id="cart_count"><font color="#000000">(<?= $cartNumbers; ?> items)</font></div></td>
<td><a href="#" onclick="itemcount_revert(<? $cartNumbers; ?>);">Click for AJAX</a></td>
<script language="JavaScript" src="itemcount_revert.js"></script>
...
<? 
$cartNumbers = total_items();
?>
...
<td width="50" height="20"><div id="cart_count"><font color="#000000">(<?= $cartNumbers; ?> items)</font></div></td>
<td><a href="#" onclick="itemcount_revert(<? $cartNumbers; ?>);">Click for AJAX</a></td>

Is the = total_items() a PHP function you're calling, or is it supposed to be a JavaScript function? Because if it's supposed to be JavaScript, you can't have PHP and JavaScript talk directly like that -- they're from opposite sides of the tracks.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?
$cartFinal = $_GET['cartNumbers'];
 
echo ("<font color=\"#000000\">(".$cartFinal." items)</font>");
?>
<?
$cartFinal = $_GET['cartNumbers'];

echo ("<font color=\"#000000\">(".$cartFinal." items)</font>");
?>

A couple tests you can do to see where you're losing your variable data
1. give $cartFinal a static or string value to see if it echoes in your html
2. enter the page.php?cartNumbers=12 in your browser location bar to see if you're getting the $_GET query to the PHP

Are you thinking that the Ajax response will be returned as a $_GET variable, because it's returned from the xmlHttp.response type object value.

Good luck

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

Permalink

Aug 8th, 2008

Re: AJAX td?

Sorry it took me so long to get back to you... after thinking for a while, I decided not to try and pass the variable. Instead I just put an include to my config.php(holds total_items function) on the return page (world.php) and have it refresh on an interval of 5 seconds instead of having to hit a button..

Altho I'll play with what you posted and see if I can't get it to work for me in a later project of course =).

Thanks alot for all the help from you guys. You really saved me alot of stress and confusion reading more bad tutorials and misleading forum posts. I can now say I know the basic of applying AJAX

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: textarea with formatting

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Help needed with Scriptaculous/Prototype

DaniWeb Message

Cancel Changes

User Name
Password