Ajax caching issue with IE workaround

If you’ve been developing websites I’m sure you pretty feel a little nausea from browser refreshing after an operation and prefer to work with AJAX for updating, deleting or loading some data from your DB with out the page reloading.

Most commonly used is http request is GET, your script runs flawlessly with Firefox, Chrome and Safari however on IE7 & and IE8 you don’t see the updates. This is because IE 7 and IE 8 treat GET request differently than POST, if there is no change from the last call it will always load up from it’s cache.

The workaround to the issue is pass an ever changing variable to the GET request like the current timestamp or date.

1. You can pass it on the ajax function call by adding an extra parameter time on the ajax call on the page.

ajaxify(x,<?php echo time(); ?>); // ajaxify(keywords, rand_time)

Then on your ajax function xmlHttp request call the rand_time parameter

xmlHttp.open(“GET”,”includes/ajax_page.php?dontcacheme=” + rand_time +”&keywords=”+keywords,true);

2. Or just create the random string using a Javascript Date class.

xmlHttp.open(“GET”,”includes/ajax_page.php?dontcacheme=” + new Date().getTime() +”&keywords=”+keywords,true);

This workaround worked well with my ajax scripts. Hope it helps.

Submit a Form using Enter Key

Here is a little Javascript I picked up. I run into a problem in IE wherein a form won’t submit when you hit the Enter key it just reloads itself but clicking the Submit button would processes your form. The form works with the Enter key fine in FF but not in IE.

Chances are that you maybe calling a function on your Submit button that will load the requested page? Something like this?

input type=”submit” name=”search” value=”Search” onClick=”myfunction();” >

Where in the myfunction() function can be anything like validating a page before it submits your data, or trigger another event or load an ajax request.

To fix this and allow using the Enter key to submit your form in IE. Create a new function in your Javascript like below which checks for the Enter key being pressed, keyCode == 13 then call your original event myfunction.

function checkEnter(e){
var characterCode
if(e && e.which){
e = e
characterCode = e.which
else {
e = event
characterCode = e.keyCode

if(characterCode == 13){
myfunction(); // onClick function you were loading on the submit button
return false
return true
} // checkEnter

Then on one of the input fields call the onKeyPress event and call your new function.

input type=”text” name=”keywords” onKeyPress=”return checkEnter(event)” >