Cache is not working over JS files when I use $.Ajax-Post to load more data

Question

I have all set to use Cache with JS Files and it really works, but here is the thing...

I have a .click() event on a div tag, that tiggers an $.AJAX method and let me get more information/data from the DB.

When the information is retrived i see in the Console (Network Activity) that all my JS files are requested again and the cache is not been used...

Steps:

1) I enter the main page (main.php) and JQUERY.MIN.JS (from api.google....) is retrived from cache...

2) I click the div, to get more information from moreinformation.php

3) moreinformation.php return html code with a dataTable plugin ( http://www.datatables.net/ )

4) The table is shown on the main page...

In the console I can see perfectly that the JQUERY.MIN.JS file is being loaded again with the ?_=TIMESTAMP

Ex: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?_=1361806746980

morinformation.php have the < scripts > to jquery.min.js and dataTables.js...

I Hope you can help me!

Thanks!!

Answer 1

Based on the above (It's not entirely clear where you are caching), but it looks like the below could be the cause of your problem.

The Jquery Ajax method has a cache parameter.

cache (default: true, false for dataType 'script' and 'jsonp') Type: Boolean If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

Try setting this to false, when sending your request.

http://api.jquery.com/jQuery.ajax/

It does this to override the browsers in built caching to stop the AJAX result returning an old cached value.

Answer 2

Turning my comment into an answer since that appears to be the solution you wanted.

The best solution would be to change the server to return just the data you actually need, not an entire HTML page with jQuery in it. Makes it faster to retrieve too.