Geek Answers Handbook

How to stop jquery by adding a unique identifier to scripts called via ajax?

I use jquery ajax functions to capture a fragment of a page and display in a page section - this fragment includes html and links to external js files.

The program flow is as follows:

Calling the main page -> A fragment page that calls -> various large js files using script tags.

I turned on the cache option in my initial ajax call so that the fragmentation page is cached (there are no unique identifiers added to the URL), however when loading the fragment it appears that jquery rewrites the script URLs to add a unix timestamp to each browser once downloaded a new copy of the scripts. The scripts I'm calling are 250 kb oriented, and it will really hurt users when the browser blocks when they are called. Is this the desired jquery behavior? Is there a way to disable URL rewriting?

Many thanks for your help

+6
javascript jquery ajax
source share
3 answers

It looks like the jQuerys evalScript function is starting you up ...

Line 543 jQuery:

function evalScript( i, elem ) { if ( elem.src ) jQuery.ajax({ url: elem.src, async: false, dataType: "script" }); else jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" ); if ( elem.parentNode ) elem.parentNode.removeChild( elem ); }

Here is a breakdown of what happens: The JS main page calls:

 $.ajax({ url:"frag.htm", type:"GET", success:callBackFunction })

and GETs frag.htm, which contains something like this:

 <html><head><script src="test.js"></script></head><body>Content</body></html>

then the callback function is called, which probably looks like this:

 function callBackFunction(data){ $("#ajaxContent").html(data); // <- this is the beginning of your problems... }

When the jQuery html (data) function is called, it "clears" the HTML by removing any script tags, and then calls evalScript on each of them. evalScript, as you can see, does not indicate "cache: true", so when it passes through the $ .ajax cache, it is zero. When the cache is null and dataType is a "script", jQuery sets cache = false.

So, to get around this problem, try the following:

 function callBackFunction(data){ var tempAJAX = $.ajax; // save the original $.ajax $.ajax=function(s){ // wrap the old $.ajax so set cache to true... s.cache=true; tempAJAX(s); // call old $.ajax } $("#ajaxContent").html(data); // insert the HTML and download the <script>s $.ajax = tempAJAX; // reset $.ajax to the original. } }

Before inserting the new HTML from "frag.htm" into the main page, we intercept all calls to $ .ajax, change the object by turning on cache = true, and then after loading the script, paste the HTML.

Let me know if you have any questions.

+4
source share

This solution is less hacked than Murdoch's solution:

 $.ajaxPrefilter('script', function(options) { options.cache = true; });

See http://api.jquery.com/jQuery.ajaxPrefilter/

+11
source share

  • Get the web server to serve the script with a future expiration date.

  • If you use dataType = "script" as an option for jquery ajax, caching will be disabled by default, see http://docs.jquery.com/Ajax/jQuery.ajax#options , try setting it manually to "html".

 $.ajax({ type: "GET", url: "test.js", dataType: "html" // if not set jquery will guess what type it is and disables caching when matching "script" });
0
source share

More articles:


All Articles