JavaScript file not updating no matter what I do
You are sure you are linking to the same file and then editing that same file?
On some browser, you can use CTRL F5 to force a refresh (on the PC). On the Mac, it is Cmd Shift R
Firebug also has a net tab with "Disable Browser Cache".
But I want to give a warning here: even if you can hard refresh, how do you know your customers are getting the latest version? So you need to check, rather than just making sure you and your program manager can do a hard refresh and just go home and take the paycheck next month. If you want to do a job that change the world for the better, or leave the world a little bit better than you found it, you need to investigate more to make sure it works for your customers too (or else, sometimes the customer may call tech support, and tech support may read the script of "clear out the cookies and it will work", which is what happens to me sometimes). Some methods down at the bottom of this post can ensure the customers get the latest version.
Update 2020:If you are using Chrome and the DevTools is open, you can click and hold the Refresh icon in front of the address bar, and a box will pop up, and you can choose to "Hard Reload" or even "Empty Cache and Hard Reload":
Update 2017:
If you use the Google Chrome debugger, it is the same, you can go to the Network section and make sure the "Disable cache (while DevTools is open)" is checked, in the Settings of the debugger panel.
Also, when you link the JavaScript file, use
<script src="my-js-file.js?v=1"></script>
or v=2
, and so forth, when you definitely want to refresh the file. Or you can go to the console and do a Date.now()
and get a timestamp, such as 1491313943549
, and use
<script src="my-js-file.js?t=1491313943549"></script>
Some building tools will do that automatically for you, or can be configured to do that, making it something like:
<script src="main.742a4952.js"></script>
which essentially will bust the cache.
Note that when you use the v=2
or t=1491313943549
, or main.742a4952.js
, you also have the advantage that for your users, they definitely will get the newer version as well.
Not Updating javascript file
Your problem would be:
- Browser Caching JavaScript
Check whether the browser is caching the javascript. To do it, check the header of the javascript on the browser for the attribute Cache-Control in the browser. Case yes, configure Cache-Control to no-cache on the project. Disable cache only in your development environment.
- Visual Studio or IIS not reloading the javascripts
Check whether the Visual Studio or IIS are reloading your entire project after the deploy.
Suggestions to solve your problem:
Solutions to solve this problem is version the javascript.
- Using different names
One way to ensure that the user will receive a fresh version of javascript is versioning the filename.
Instead of use only the name, you can concatenate a version
number to the javascript.
Example:
www.example.com/script.8238823.js
www.example.com/script.3434342.js
This urls represent different paths and the browser will update.
- Using query string
Another way is use a query string such v=
+ version
.
The version
can be a MD5 hash, or the timestamps or the size in bytes of the file.
Example:
www.example.com/script.js?v=999990
www.example.com/script.js?v=129
This force the browser to cache the file, and reload when the version of v
, change.
I don't use ASP.NET, but I think that exists solutions for this.
js file not updating on client browser
You can add something unique to the script tag like:
<script src="myscript.js?version=1.1"></script>
This will force the browser to fetch the new verison.
visual studio not updating html / javascript to server / browser
In Opera and Chrome (and possibly others), you can disable caching while in 'development mode'.
While in DevTools, the 2nd option in the Settings menu is
Disable cache (while DevTools is open)
flask does not see change in .js file
Ultimately this is a frustrating browser cache issue, which can be solved by forcing the browser to do a "hard refresh", which is going to be a browser/OS dependent keystroke, but generally this works:
- Windows: Ctrl+F5
- Mac: Cmd+Shift+R
- Linux: Ctrl+Shift+R
There are other filename tricks one can use to avoid this issue (mentioned in comments of the OP). These are especially important in production where you have no control over browser behavior.
For non-Static Flask responses you can set the cache_control.max_age
property, which should tell the browser when to expire the response if it is cached. For instance if you have a Flask XHR endpoint that returns JSON data you could do this:
@app.route('/_get_ajax_data/')
def get_ajax_data():
data = {"hello": "world"}
response = jsonify(data)
response.cache_control.max_age = 60 * 60 * 24 # 1 day (in seconds)
return response
You typically can also set default values in your production web server configuration for specific resource types (e.g. CSS/JS/HTML/JSON/etc)
Edit 4/1/2019 (unrelated to April Fools day)
- Mac / Safari keystroke now appears to be: Cmd+Opt+R (via comments, thanks!).
- See the new answer from @MarredCheese for a very elegant "filename trick" to force the browser to ignore cached copies for updated files.
Visual Studio won't update ASP.Net MVC project when making changes in JS file
Surely a problem is js file is caching.Do CTRL + F5 and then check.If the problem still occured you must clear the whole browser cache.
Firebase deploy not updating JS file
Node static js file isn't refreshing
I think you must disable cache in your browser. Because browser think that file is not to old to be refresh from server and use cached file.
For Chrome - open console by F12
(also in other browser works) and check it.
Related Topics
Set Values in Input Type Date and Time in JavaScript
How to Use Aria-Expanded="True" to Change a CSS Property
How to Submit an HTML Form Without Redirection
Jquery Validate Phone Number With With Regex
Pass Input Tag Value to as Href Parameter
Multiple Key Names, Same Pair Value
Show/Hide Select Options Based on Value of Another Select Using Javascript/Jquery
What's the Best Way to Reload/Refresh an Iframe
Dynamically Change Background Color on Scroll
Why React Props Are Passed Undefined to the Child Component
How to Delete Rows of Data Using Sequelize
How to Execute a Function After Another One
Read Lines of a Txt File and Organize in a Json File
Using Html5/Javascript to Generate and Save a File
How to Apply CSS to Parent Using Child Selector - With CSS or Angular 2
Webpack: Module Not Found: Error: Can't Resolve (With Relative Path)
Accessing Variables from Other Functions Without Using Global Variables