I'm currently working with an e-commerce shopping site where different products require to be rated. I'm using a star rating script.
Everything is working fine but a product should be rated only once according to the visitor's IP and once the visitor clicks a star (among the five stars), all the stars should be disabled so that duplicate rating for the same product with the same IP can be prevented (I'm also using serve side validations) and average rating according to the new value from the database should be indicated by the same stars (which have just been disabled).
It's working on Firefox with no problem at all. When a visitor clicks a star a new value is passed to the database (using Ajax) and according to the new value, average rating is calculated and displayed but Internet explorer is unable to retrieve the new value from the database using Ajax.
I'm just demonstrating the problem with very simple code as follows.
Following is Temp.php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
if(xmlhttp.readyState==4 && xmlhttp.status==200)
var rating= document.getElementById("rating_value").value;
alert(rating); //Rating value of hidden field from the ajax response is alered.
xmlhttp.open("GET", queryString, true);
$result=mysql_query("select rating_num from rating where prod_id=".$_GET['prod_id']."");
echo "<input type='hidden' id='rating_value' name='rating_value' value='$rating'/>";
Internet Explorer does some funny stuff with caching sometimes. It tends to take a much more intense approach to caching than other browsers. The cache is a great thing when we normally access the same resource twice, three times, or more. In the cases of static content, we actually want the browser to be smart enough to not request data it already has retrieved, as this saves time and bandwidth.
However, AJAX requests are different in that they are generally dynamic. The same request made at one moment in time may of course yield a completely different result at another moment in time. As a result, we don't normally want to cache an AJAX request.
However, IE's intense caching becomes a problem when it comes to AJAX requests. The browser treats an AJAX request just like it would a request for a static, unchanging image, and it pulls the previous results of that request from it's cache as if nothing has changed.
This is of course not something that you want Internet Explorer to do. Thus, the quickest and simplest technique you can use to force IE to pull fresh data is to make a slight modification to the URL each time.
Lucky for us, time is something that constantly moves forward, and by its very nature, it is guaranteed to be unique. Here is how you can avoid this problem:
var queryString="Temp1.php?prod_id="+prod_id + "&t=" + new Date().getTime();
By appending the epoch time to the end of the query string, we ensure that the URL will always be unique, ensuring that the browser always grabs fresh content from the server.
I use this technique on all of my AJAX requests and have found it to be extremely valuable.