Issue with caching (maybe) when using AJAX and PHP

Question

Firstly I tried fiding some similar posts but could not quite find anything. Mainly because I see this problem in FF and not IE only.

I had a web page that was updating a MySQL db no problem with some data. Then today, I switched the way it does this so that I can use an ID instead of a value, so for sizes, instead of small, medium and large it is 1, 2 and 3.

The site in question is here and you can get to a test gallery by entering the code 1234.

I am getting the script to outoput per each time you add to basket.

So under the radio buttons, there is the values 1, 2 and 3.

The HTML for this bit is as follows:

<input type="radio" name="imageSize" id="imageSize" value="1"/> Small (6x4) - &pound;4.99<br/>
<input type="radio" name="imageSize" id="imageSize" value="2"/> Medium (7x5) - &pound;6.99<br/>
<input type="radio" name="imageSize" id="imageSize" value="3"/> Large (8x6) - &pound;10.99

I have decided for now to hand code it in to get it working.

This gets sent to an included JavaScript file and then gets sent to an insert page as thus:

unction createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

/* -------------------------- */
/* INSERT */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var image= encodeURI(document.getElementById('image').value);
var image_Size= encodeURI(document.getElementById('image_Size').value);

alert(image_Size);
alert(nocache);

// Set the random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'insert.php?image='+image+'&imageSize='+image_Size+'&nocache = '+nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if(http.readyState == 4){
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('insert_response').innerHTML = 'Image added:'+response;
}
}

As you can see, no matter what happens, the alert popup says 1. Even if you select medium or large. What's going on here?

Answer 1

You problem here is that you are calling

document.getElementById('image_Size').value

Like Lizard stated, you have 3 inputs with the same ID. document.getElementById will return the first element with the ID, because and ID is supposed to be unique .

Here is a way to get the selected value, and since you have jQuery included I will write it in jQuery for you.

var image_Size = 0;
$('[name=image_Size]').each(function() {
   if ($(this).attr('checked')) image_Size = $(this).val();
});

And a little bit of googling finds this nifty time-saver!

var image_Size = $('[name=image_Size]:checked').val();

I hope this helps! And also, you might want to set nocache differently:

nocache = new Date().getTime();

This will give you the time in ms since the Unix epoch, so it will be different everytime the user requests the page.

If you need more help with the jQuery API, I suggest you start here .

I hope this helps!

-Stephen