IE 8 Caching Problem - javascript

One of my javascript sources had an extra comma that was throwing an error in IE8. So I opened up my editor, deleted the comma, and saved. I reloaded IE8, but it was still pulling the old js file. I deleted everything in "Delete Browsing History...", and restarted the browser. It is still pulling the old file. I even set up a log on my server to show whenever the js file was requested. When reloading with IE, the js file is never requested.
I tried doing the same process in Chrome and FF, and it pulled the new file and logged properly on the server.
Is there some other cache that I am failing to clear in IE that would cause this problem?

Try CTRL + F5.
And you can use CTRL + SHIFT + DEL to bring up the dialog where you can clear the cache explicitly.
Just so you know, Browsing History has nothing to do with the cache.

Ctrl + F5 is your friend; forces a cold-cache reload. If you're worried about your users having the same problems, though, there's a trick you can use to force them to get new versions.
Keep in mind that if it's an external resource, you can throw a query parameter on the src attribute of a script tag to make IE recognize it as a different version. e.g:
<script type="text/javascript" src="lol.js?new=yes"></script>

Maybe using in your scripts using jquery this line of code to correct the browsers do caching:
$.ajaxSetup({ cache: false });

Related

Chrome doesn't recognize my changes on my javascript file and loads old code?

I have been sitting here for almost an hour here to test the website I'm building. Since I wanted to see the new changes from my code I reloaded, but it was reloading old one. I opened the devetools to hard reload and empy cache hard reload, they both load my old code. I went to incognito mode and it did the same thing. I went to devtools again to disable the cache from the settings and checked the disable cache in the network tab; it still cache my old code. Add-ons to clear the cache didn't work as well. Man, I haven't had this problem before and it only happened last night and it's worst today.
I'm so lost now since chrome doesn't load my new changes from my javascript file. Is there a solution for this?
One solution for this problem is to force reloading the resource in order to avoid the cache. You can get this modifying the url with http get parameters:
Change:
<script src="myscripts.js"></script>
to:
<script src="myscripts.js?newversion"></script>
Where newversion can be any string as it will be ignored. A useful option is to use the date, or version, of your code.
I found this workaround particularly useful when I came across this same problem and wanted to ensure that all clients (not just my own browser!) would run the new version of the code.
I think there's an even better way:
You can use PHP to add the last modification date of your JavaScript file to the URI of that file.
<script src="js/my-script.js?<?php echo filemtime('js/my-script.js'); ?>">
</script>
The browser will receive:
<script src="js/my-script.js?1524155368"></script>
The URI of the file will automatically change if the file is updated.
This way the browser can still cache unchanged files while recognizing changes instantly.
Are you using any type of compilation tools (like gulp or grunt)? It's possible that there is an error in your code, and the tool is not compiling the updated code.
Otherwise, the solution #airos suggested should work. Appending any unique query string to the reference of your JS will always serve a fresh copy on first reload (since the browser will be caching a new URL).

Force HTML template reload in Angular2

I am working on Angular2 project and got an issue that Chrome caches HTML templates. It is not a problem for the development since I can make cache to be ignored in Chrome Dev mode.
But it is a real pain for the customer and his users...
I tried to add following to templateURL:
templateUrl: './pages/add-financial-deal.html?v=201610070907',
Updated URL is added into auto-generated JS but Chrome still uses cached JS even if I click Shift + F5. Checkout screenshot: http://screencast.com/t/bc2nf4zVcm
Is there any reliable way to get it working?
Thanks
Edit: Decmber 2nd
I have finally figured out what happening there. Despite the fact that I have added changes into TS (and auto-generated JS was also updated) Chrome is still loading file from in-memory cache - screencast.com/t/FGuaMXaKL . I have been waiting for 30 mins, but it still loads in-memory cached file. Is it intended behavior? How to avoid this?
I have finally fixed an issue which was actually 2 issues:
HTML templates were cached. This was fixed by adding extra parameter into template URL, like "template.html?v=201612041641"
JS files were staying in Chrome in-memory cache. Despite the fact that it should be kinda fast cache JS were cached for hours and hours. And Ctrl/Shift + F5 does not affect in-memory cache. Also, I tried to set cache control to "no-store, no-cache" in root html page. Finally, I set extra header into IIS Response header option "Control-Cache:no-cache" and now it works. JS files are stored on hard drive Chtome store, 304 status is recieved and changed files are properly updated

Firefox doesn't affected with JavaScript changes

I updated a JavaScript file then uploaded it to my server. The changes was effective on all browsers except Firefox. Firefox see the old version file which returns an error. I opened the file on the web console and still the same old version of the file. I also tried the clear refresh with no success.
I hope any body can help to fix this problem
Clear your cache. For example, if you're using windows, press CTRL+R or CTRL+F5.
Alternatively, for testing, you can do something like this with PHP:
<script src="js/barfoo.js?v=<?=rand(1,99999);?>"></script>
(...which is, by the way, especially nice if used with favicons!)

how can I force IE9 to "see" the most current javascript when using the debugger?

I'm using IE9 to debug a web app. I made some changes to the javascript after loading the page. I'm not able to get IE9 to stop on the new code. The message is "The code in the document is not loaded". I can set breakpoints when I'm not debugging, but they won't be valid when I start debugging. I'm using IE7 Browswer Mode, IE7 Document Mode.
Things I've tried:
close dev tools window, re-open
stop debugging, start debugging
Ctrl R in dev tools window (same as Clear Browser Cache button)
Ctrl R on the IE9 web page
Ctrl F5 on the Ie9 web page
Clear browser cache for this domain
Check (set) Always refresh cache from server
Next thing to try (I guess) would be closing IE completely. Is that the fix for this? If so, yuck. It takes me a couple of minutes to set the page up so doing that after every JS change really stinks. I can use FF4 to develop the JS, but the JS issue I'm seeing is specific to IE7 so I have to do it this way.
>> How can I get IE9 (running in IE7 mode) to reliably debug the most current JS from the server?
This issue wasn't related to caching etc. IE9 was hitting a script error (missing closing paren) in the new code and not allowing breakpoints anywhere in the script. IE seemed very quiet about the script error though. Anyway, fixing the script error fixed the issues with breakpoints / caching.
If you have access to the code:
In you javascript file reference add a query string, something like this:
<script src="Scripts/main.js?v=1" type="text/javascript"></script>
And every time you change in the js file change the v value to something else, like that the browser will feel that this is a new file and will get it.
Add this:
window.applicationCache.addEventListener('updateready', function (e)
{
if (window.applicationCache.status == window.applicationCache.UPDATEREADY)
{
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?'))
window.location.reload();
}
}, false);
I found this solution somwhere in the Net. Sorry, but I don't remember the author. It works for me when I debug Web App with JavaScript in Visual Studio and use IE.
I found this question based on the "the code in the document is not loaded" error message. I'm not using IE7 document mode or any of that, just IE9.
Like jcollum, my issue wasn't related to caching.
I'm using MVC.Net, and someone had set up a piece of javascript to rely on a string in the ViewBag. I changed a couple things, and that ViewBag string disappeared, so the resulting javascript looked something like this:
if(!()) {
// Some code
}
Javascript died right here, and wouldn't process the rest of the code in the block. This was confusing, as it was still trying to execute javascript in a different set of script tags, but which relied on a variable set in the other block it wouldn't load.
So, basically, a syntax error was introduced via strange means, and the debugger refused to load some of the code which came after it. Another lesson on the dangers of ViewBag.

Javascript debugging difficult as browser doesn't refresh the scripts!

I'm trying to debug a Javascript written in the Mootools framework. Right now I am developing a web application on top of Rails and my webserver is the rails s that boots WEBrick.
When I modify a particular tree.js file thats called with in one a mootools init script,
require: {
css: [MUI.path.plugins + 'tree/css/style.css'],
js: [MUI.path.plugins + 'tree/scripts/tree.js'],
onload: function(){
if (buildTree) buildTree('tree1');
}
},
the changes are not loaded as the headers being sent to the client are Last Modified: 10 July, 2010..... which is obviously not true since I just modified the file.
How do I get rid of this annoying caching. If I go directly to the script in my browser (Chrome) it doesn't show the changes until I hit refresh, but this doesn't fix my problem when I go back to my application and hit refresh, it still loads the pre-modified script.
This has happen to me also in FF, I think it is a cache header sent by the server or the browser itself.
Anyway a simple way to avoid this problem while in development is adding a random param to the file name of the script.
instead of calling 'tree/scripts/tree.js' use 'tree/scripts/tree.js?'+random that should invalidate all caches.
As frisco says, adding a random number in development does the trick but you will likely find that the problem still affects you production. You want to push new JavaScript changes to your users but can't until their browsers stop caching the file. In order to do this, just get the files mtime and add that as the random string. This will only change when the file is modified and so the JavaScript will be loaded from cache if it has not been changed or it will be loaded from the server, if it has.
PHP has the function filemtime but as I'm not familiar with Ruby, I'm afraid I can't help you further in that direction (sorry!). However, this answer seems to accomplish what you want.
Try the Ctrl+F5 trick. To avoid hitting browser cache.
More info here:
What requests do browsers' "F5" and "Ctrl + F5" refreshes generate?

Categories

Resources