View Full Version : Generating unique URLS for caching issue with IE & AJAX

08-02-2006, 05:58 PM
In order to get around the caching issue in IE (http://webdescript.com/blog/intersection/categories/10-ajax)when using AJAX I understand that I need to somehow generate a unique url each time the page is requested.

I have read that appending a time/date function to the end of the url will create unique urls. This the example I found:

url = "http://www.somehost.com/people.php?age=3" + "&ms=" + new Date().getTime();

However I can't seem to get it to work. The links open in a new page instead of within the tabbed AJAX area. I have 5 tabs that are linked to external pages:

<script language="javascript" type="text/javascript">
var urls = new Array(5);
urls[0] = "dcs.htm" + "&ms=" + new Date().getTime();
urls[1] = "spc.htm" + "&ms=" + new Date().getTime();
urls[2] = "d.htm" + "&ms=" + new Date().getTime();
urls[3] = "dv.htm" + "&ms=" + new Date().getTime();
urls[4] = "rvu.htm" + "&ms=" + new Date().getTime();
urls[5] = "ts.htm" + "&ms=" + new Date().getTime();

<li><a href="javascript:location.href=urls[5];" rel="ajaxcontentarea"><img src="images/icon_more.gif" border="0" />ts</a></li>

The only problem I have is that a new page is loaded instead of loading into the "ajaxcontentarea".


08-02-2006, 08:07 PM
What script are you using for your Ajax? We can't help if we don't know what you're talking about.

From what you've posted, it sounds like your problem has to do with the target for opening the linked page in a specific element on the current page. Yet you have not posted anything that would relate to how the linked-page is displayed. All I see is a string array of URLs that you'd like to link to, and a confusing anchor tag that uses js instead of pure html (which may be written so as to somehow degrade gracefully for non-js browsers, although it still seems like it's purposes would fail). The reasons why I think the anchor is confusing is:
1) I've never heard of the ajaxcontentarea link-type for the rel attribute (eg prev, next, glossary, copywrite, etc.) I don't think ajaxcontentarea is defined for HTML 4.0 or XHTML so I'm guessing it is a "homemade" value being placed in the rel attribute and is being used by some outside script.
2) The href points to a js line. It would be better to have href point to an actual url and then use onclick to run a js function. In the function, you'd return false to prevent the link from activating "normally" if the user had js enabled, but for those without js, the anchor would still function "correctly" (albiet without the flare of js)
3) If ajaxcontentarea is the name of a frame / iframe, then you may be mistaking the rel attribute for the target attribute. Saying

<a href="myURL.html" target="mainFrame">Click Here!</a>
would load myURL.hml inside the frame that has the name attribute of mainFrame. However, since you mention that this is using Ajax, I'm guessing that ajaxcontentarea is actually something like an id for a <div> that some Ajax script uses to post the results of the server call.

What's also confusing is that you've phrased your question about the caching problem of browsers, yet I believe the code you posted for that should work fine in retrieving the most current version of the page... I use something similar:

xmlDoc.load(xmlURL+"?d=" + Date.parse(new Date()));

So I think your question is more about where a page gets displayed when retrieved rather than a problem of not retrieving the most recent version of the page. And to answer that question better, we'd need to see what Ajax script is being used.

08-02-2006, 08:58 PM
I am using this script (http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm)from dynamic drive.

I haven't modified their code very much. I did add in the array because I have one page (.htm) that does not update when using IE. When done, all pages will need to pull latest because there will be reports that must be displaying the most up to date info. In FF everything works as expected.

I'm basically going to have to scrap this if I cannot get IE to grab the latest. I'll use an iframe I suppose.

This help any?

08-02-2006, 09:22 PM
This is indeed exactly what we'd need to determine the problem... It's somewhat long so I'd need some more time to slog thru it.

First thing I noticed, however, is that you're re-inventing the wheel, so to speak. The first line of the ajaxtabs.js file has:

var bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no) and father down the script it uses this value to tack on some date text to make the page unique for each call. Thus you can just set this value to 1 and drop off all of your '+"&ms="+new date.getTime();' in the array of urls.

I also noticed that your changed the href from their examples to be "javascript:location.href=urls[5];" instead of an actual url. This goes back to what I mentioned about degrading gracefully. By having an actual url, if the user is not using js, they can still get to the page by clicking on the tabs. But the script will use that value in its Ajax call. I'm guessing (although not definite) that part of the problem is that it might be trying to call the value as an actual url instead of parsing it to the array value. However, if you say that it works in FF, this problem wouldn't make much sense...

I'll need more time to go thru this, however, to see if there are some other problems.

EDIT: I also just noticed that your urls have "&ms=" right after your "page.htm"... the first parameter should be "?ms=" and subsequent ones use "&" instead.... Again, don't know why FF would accept it but not IE...

08-02-2006, 09:52 PM
I checked the ajaxtabs.js and I have:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

I haven't done a very good job explaining, but I did use their default scripts, pointing toward standard .htm links, but I had to change it because the external pages were not refreshing. I did a quick search and found out that IE will cache content. The issue is documented in the book AjaxHacks too("Internet Caching Bug", p361). The solution they offer is coded in PHP. Great. I am not running php.

Based on the search results, the easiest solution was to add on a random number to the url to fool the browser into thinking it was a new page, but I was having trouble doing even that. I left my helmet at home today. I'll remember it tomorrow.

So, knowing this I have been trying to locate a work around that uses only .js or html only.

08-02-2006, 10:02 PM
The best way to avoid the caching problem is server side rather than in the Javascript. If you are using PHP for the server side part you simply need:

header('Cache-Control: no-cache');

other server side languages have similar ways to set the returned value so that it doesn't get cached.

08-03-2006, 04:13 AM
Change it to post instead of get....and no cache headers on the requested page.