AJAX

AJAX td?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

AJAX td?

Aug 5th, 2008

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

 Help with Code Tags 
 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:

 Help with Code Tags 
 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.

•

Join Date: Aug 2008

Posts: 2

Reputation: gralex07 is an unknown quantity at this point

Solved Threads: 2

gralex07

Offline

Newbie Poster

Re: AJAX td?

Aug 5th, 2008

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)

 Help with Code Tags 
 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)

 Help with Code Tags 
 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)

 Help with Code Tags 
 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
?>

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

Re: AJAX td?

Aug 5th, 2008

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.

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

Re: AJAX td?

Aug 6th, 2008

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

 Help with Code Tags 
 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):

 Help with Code Tags 
 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)

 Help with Code Tags 
 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.

•

Join Date: Feb 2008

Posts: 213

Reputation: nikesh.yadav is an unknown quantity at this point

Solved Threads: 17

nikesh.yadav nikesh.yadav is offline

Offline

Posting Whiz in Training

Re: AJAX td?

Aug 6th, 2008

is problem solved or not

Help as an alias

I think programming is great................
Tour Travel weblink by me and about Tour ,
Go To My Home Page and I m in Webdevelopment.

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

Re: AJAX td?

Aug 6th, 2008

just posted that... have any ideas?

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: AJAX td?

Aug 6th, 2008

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

 Help with Code Tags 
 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

 Help with Code Tags 
 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

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

Re: AJAX td?

Aug 7th, 2008

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:

 Help with Code Tags 
 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

•

Join Date: Aug 2008

Posts: 381

Reputation: langsor is an unknown quantity at this point

Solved Threads: 33

langsor

Offline

Posting Whiz

Re: AJAX td?

Aug 7th, 2008

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

 Help with Code Tags 
 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.

 Help with Code Tags 
 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

•

Join Date: Aug 2008

Posts: 66

Reputation: PsychicTide is an unknown quantity at this point

Solved Threads: 7

PsychicTide PsychicTide is offline

Offline

Junior Poster in Training

Re: AJAX td?

#10

Aug 8th, 2008

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