mpartarrieu
Programmer
I am creating a small shopping kart using ajax and have a problem swapping images after executing an ajax script when using firefox. This is how the page should work:
1. Visitors select an item to add to the shopping cart from a list by clicking on an image below the product. This triggers an ajax event and the content of a div element (kart) is reloaded. At the same time, the source of the clicked image changes to another "loading image".
2. The reloaded content in the div element contains an image. This image has an onload attribute, which once again changes the source of the image clicked on step 1 to another "ok image". The purpose of this is that the visitor then knows that the process of adding the product to the shopping cart is finished.
You can see this at work at
Ok, steps 1 and 2 are working fine in IE, but when I tested it on Firefox step 1 works great but there's a problem on step 2. I mean, the image actually changes from "loading" to "ok", but all the images corresponding to products previously added to the cart also change.
I use three files to do all this:
a) index.php: the main file that contains the div element and the list of products
b) getValues.php: that reloads the content of the div element
c) ajax.js: with the ajax script I'm using
Here are the scripts:
index.php
getValues.php
ajax.js
If anyone has an idea of what the problem might be, please help me...
TIA
1. Visitors select an item to add to the shopping cart from a list by clicking on an image below the product. This triggers an ajax event and the content of a div element (kart) is reloaded. At the same time, the source of the clicked image changes to another "loading image".
2. The reloaded content in the div element contains an image. This image has an onload attribute, which once again changes the source of the image clicked on step 1 to another "ok image". The purpose of this is that the visitor then knows that the process of adding the product to the shopping cart is finished.
You can see this at work at
Ok, steps 1 and 2 are working fine in IE, but when I tested it on Firefox step 1 works great but there's a problem on step 2. I mean, the image actually changes from "loading" to "ok", but all the images corresponding to products previously added to the cart also change.
I use three files to do all this:
a) index.php: the main file that contains the div element and the list of products
b) getValues.php: that reloads the content of the div element
c) ajax.js: with the ajax script I'm using
Here are the scripts:
index.php
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="es">
<head>
<title>PROBLEM LOADING IMAGES</title>
<script type="text/javascript" language='JavaScript'>
<!--
function imgSwap(img_name,img_src)
{
document.getElementById(img_name).src = img_src;
}
// -->
</script>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<table border="1">
<tr>
<td><div id="kart"><? include("getValues.php"); ?></div></td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td style="cursor: pointer;">
<br />Product A<br />
<img src="icn/add_kart.gif" name="add_kart_1" id="add_kart_1" alt="" title="" width="100" height="17" border="0" onclick="getPage('product=1'); imgSwap('add_kart_1','icn/add_kart_on.gif'); return false;" />
</td>
</tr>
<tr>
<td style="cursor: pointer;">
<br />Product B<br />
<img src="icn/add_kart.gif" name="add_kart_2" id="add_kart_2" alt="" title="" width="100" height="17" border="0" onclick="getPage('product=2'); imgSwap('add_kart_2','icn/add_kart_on.gif'); return false;" />
</td>
</tr>
<tr>
<td style="cursor: pointer;">
<br />Product C<br />
<img src="icn/add_kart.gif" name="add_kart_3" id="add_kart_3" alt="" title="" width="100" height="17" border="0" onclick="getPage('product=3'); imgSwap('add_kart_3','icn/add_kart_on.gif'); return false;" />
</td>
</tr>
<tr>
<td style="cursor: pointer;">
<br />Product D<br />
<img src="icn/add_kart.gif" name="add_kart_5" id="add_kart_5" alt="" title="" width="100" height="17" border="0" onclick="getPage('product=5'); imgSwap('add_kart_5','icn/add_kart_on.gif'); return false;" />
</td>
</tr>
</table>
</body>
</html>getValues.php
Code:
<?
$product = $_GET['product'];
// usleep(5000000);
if($product)
{
$pone_onload = 'onload="';
$pone_onload .= "document.getElementById('add_kart_".$product."').src = 'icn/add_kart_ok.gif'";
$pone_onload .= ';"';
}
?>
<img src="icn/blank.gif" alt="" width="100" height="100" border="0" <? echo $pone_onload; ?> />
<br />prod: <? echo $product; ?>ajax.js
Code:
function createRequestObject()
{
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
request_o = new XMLHttpRequest();
}
return request_o;
}
var http = createRequestObject();
function getPage(sequence){
http.open('get', 'getValues.php?'
+ sequence);
http.onreadystatechange = handleProducts;
http.send(null);
}
function handleProducts(){
if(http.readyState == 4){ //Finished loading the response
var response = http.responseText;
document.getElementById('kart').innerHTML = response;
}
}If anyone has an idea of what the problem might be, please help me...
TIA