I have one html file and one js file.
The html file is refreshed, but the js file never gets reloaded.
I have tried clearing the history and the cache as well as turning the iPad off.
I have also deleted all nine pages in the iPad.
Finally I found a workaround. Renaming the js file solved the problem.
But it is an awkward solution.
Is there a better way?
(I'm using the oldest iPad. Can't find out any version numbers.)
To force a reload of a JavaScript file during development I typically add a query string parameter to the end of the file. Like this:
<script type="text/javascript" src="file.js?v=0.1"></script>
When development is complete for that version I include a version number in the file name.
This can be a good idea during testing even if you're not having problems with an iPad or similar. You want to be confident that people are seeing the latest version of the file and explaining how to empty their browser's cache or forcing them to refresh every page will cause problems and false bug reports.
This is a natural habit of caching. When the file actually changes, the iPad should reload the file.
This is the same as a PC browser, or any other device with caching on.
To overcome this, add a variable to the name of the javascript file, something like myfile.js?id=[ADD TIMESTAMP HERE]
On which you ofcourse add a timestamp with the programming language you use, for example in PHP: time()
I'm not 100% sure I understand your question, however if you are building a website and you don't want user's browsers to cache the javascript file I would recommend adding a build number to the JS file each time you save it and update the html reference to the file +buildnumber.js.
Example:
instead of
<script src="myAwesomeJavscriptFile.js"></script>
make it:
<script src="myAwesomeJavscriptFile.001.js"></script>
Then the next time you change it make it:
<script src="myAwesomeJavscriptFile.002.js"></script>
The other way to do it is to send down specific no-cache headers for each file using your web server (Apache, Nginx, IIS)
Good luck!
Related
Browsers cache static files. It's what they're designed to do. 99% of the time, that's a good thing. Until we as developers update that static content.
If a developer updates a javascript file, but a user's browser pulls the cached version of it, then:
Best case, it'll be missing some new functionality until the browser decides to update its cache
Worse case, if you also updated the html page to call a javascript function that didn't exist in the older version of the javascript file that the browser cached, your page breaks
As developers, we know to hit Ctrl+Shift+R, or Ctrl+F5, or open dev console, disable cache on the Network tab, and reload. But users don't know that.
What is the best practice to handle updates to static content?
Is it to make sure that when you add new functions to a .js file, you push out the update to production a few hours/days before you update the html to call that function in <script> tags, allowing browsers to updated their cache over that time?
Is it to not call javascript functions from HTML within <script> tags at all?
Is there a way to somehow force browsers to expire cache on a specific static file when you update it?
Something else?
Obviously disabling all caching on your site is possible, but not a realistic solution.
PS. I'm not using any kind of frontend framework - just raw javascript/jquery. If the situation is different with frontend frameworks, I'd love to heard about that too at a high level
If I understand correctly, you want the JavaScript file to be updated for the user when you update. you should use service work API to create a cache version for specific files or use the Google workbox library. click here. for service worker API click here
Some years ago location.reload(true) allowed bypassing the cache like CTRL / Command+Shift+R does. Only Firefox continues to support this feature by now, but the hard reload using javascript is no longer supported on chromium based browsers. (spec doesn't describe this feature (anymore))
This change was also discussed on this issue on github/Microsoft/TypeScript and several other places on the web.
jQuery uses a simple workaround to be compatible with almost everything. If you load something with jQuerys jQuery.ajax({ url, cache: false }), it appends a _=TIMESTAMP parameter to the url, which has a similar effect but may bloat the cache.
You can make use of the Entity tag header (ETag). Entity tags are similar to fingerprints and if the resource at a given URL changes, a new Etag value must be generated by the server, which is a similar behavior to the Last-Modified header. (caniuse:etag)
Entity tags in: Apache, IIS, nginx (nginx docs), nodejs
It is also possible to clear the sites cache with a Clear-Site-Data: "cache" header. (mdn, caniuse:clear-site-data)
I had problem that i added custom java script its included but when i changes its contents it doesn't effect. it runs older java script file. since i cleared cache. i deleted every folder of /var/ also. but still it runs older java script code. while i see it in uploaded file also it shows updated code but using URL of that java script in browser it shows old code.
I flushed magento cache storage. flushed cache of css/javascript also.
In case if any guy have solution let me know.
Thanks in advance.
EDITED
Same problem with css also. Changes doen't reflect. cleared cache a lot of times from back-end as well as cleared var folder also.
Your server probably have header information asking browsers to cache static files like JS/CSS. It is likely that your browser is still caching the old CSS files. One way to check if it is indeed the browser and not say accidentally editing the wrong CSS file is by enabling and disabling (only go one way to check) the CSS file merge. By doing so you are forcing the browser to fetch for a whole new file - essentially bypassing caching.
You may also want to take a look at our CSS/JS Versioning extension which includes automatic refresh of the file name hash based on CSS/JS file timestamps (sensitive to editing and changes) http://extensions.activo.com/css-and-javascript-versioning.html
Have you cleared your local browser cache on your workstation?
Often, CSS and JavaScript can stick mightily and no matter now much you flush Magento caching on the server, the workstation browser never requests and downloads the new script. These are static files, a change in file date doesn't trigger browser reload, only complete removal from the browser cache does.
Usually CTL-F5 about three times will do it, otherwise you have to go into the web browser setups and flush browser cache there.
Also, if you're using JavaScript/CSS Merge, you need to click the button on the Cache Management page to Flush JavaScript/CSS Cache as well.
The only other place things can gum up is if you're running APC cache, you may need to flush it as well so the block caching for the head can refresh. This only matters if you changed the script and CSS file names, which you probably haven't, so it likely doesn't matter.
I wrote code for dropdown Menu and want to insert that code in other html files.
DropDown Menu code.
http://jsfiddle.net/techspartan/49Bpb/
For inserting the above HTML code into other HTML files I am using this code:
<html>
<head>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#topdiv').load('index.html');
});
</script>
</head>
<body>
<div id="topdiv">
</div>
</body>
</html>
Basically I want to declare my DropDownMenu code at one location so that if I make changes in menu code than I don't have to edit every HTML file that has the DropDown.
The above code is working in Firefox but nothing is shown in Chrome and IE-10.
Are you working locally on your machine, without any webserver? Chrome does not allow loading files via AJAX from your file system (see bugreport).
You may use XAMPP or something similar to serve your files via a local webserver.
If you are on Windows, XAMPP is probably the easiest way to get your local webserver up and running: http://www.apachefriends.org/en/xampp.html
On Mac, you may also use MAMP http://www.mamp.info/en/index.html
You may also force Chrome to allow local file access on Windows if you are starting it with --allow-file-access-from-files, more information in this stackoverflow question
For what it's worth, I have code that uses jQuery().load() to inject content into a page, and it work just fine.
If this is static content that is meant to be a standard part of your page, then the other answers/comments saying to do it on the server are probably right; stuff like that is generally better to be included on the server, because it will make your site perform a lot better than doing it on page load via Javascript. (in fact, loading a static menu this way is likely to give your site a noticable performance problem when users load the page; be warned!).
However in general the technique of dynamically adding content to a page using Javascript is perfectly valid, and commonly used, so I'll answer the question based on that.
There's nothing that I can see that's specifically wrong with the minimal example you provided, except for a missing Doctype, so I'm going to guess that's probably your issue:
If you don't have a doctype, the browser will render the page in Quirks mode. And jQuery is not designed to work in quirks mode.
Solution: Add the following line to the top of your code and try it again:
<!DOCTYPE html>
You may also want to check that IE isn't showing your page in compatibility mode as well, because that might also cause problems. If it is, you could also add an X-UA-Compatible meta tag to your page's <head> section to force IE into standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Finally, if you need to support IE8 or earlier, you should switch from jQuery v2 back to the latest release of jQuery v1 (currently 1.10.2), as jQuery v2 does not work with IE8 and earlier.
Hope that helps.
The issue you are having is not due to anything wrong with your code, but with security policies of modern browsers. Here's what happens on your development machine:
Your browser loads your local HTML file.
Your browser executes the javascript, which tries to access a file on your machine.
Your browser says, "NO!" Because this is a huge security error - without this policy websites could read through every file on your hard drive or silently send copies of any of your private information to their servers, just because you visited a site with javascript enabled. BAD!
There are some ways to try to tell your browser "No, it's ok, I want to allow this..."...but you know, this has become exceedingly difficult as it often silently breaks with new browser versions. I've slammed my head against the wall way too often, so I might suggest you skip trying to make your browser OK with what you are trying to do.
Now, why does this work on a live site? Here's what happens.
Your browser loads a website.
Your browser executes the javascript.
The script asks for a file to be loaded/accessed from a website.
Your browser says..."well, we're already on this website, so sure! Load all the files you want from that web server!" And your browser kindly gets the file, and returns it to your script, where you can painlessly include the HTML to your hearts content.
To make this work on your development machine, you have ultimately 3 choices:
1) Upload the files to a web server, then do your testing there.
2) Make your own "localhost" web server. You then access your site with something like localhost/index.html - etc. This is just enough to prevent the browser from shutting down your file load requests, because you are requesting an HTTP operation, note a FILE operation.
3) Try to force your browser to allow these requests. Details vary by browser, some browsers won't let you do this at all, and I've given up on doing this myself.
The hidden 4th choice is using HTML5 File System features, but with such poor support for technology I suggest you not even try it - the bug you are facing is purely with your development machine, so changing the technology you are using purely for a minor development convenience seems silly.
Severin provides links to the excellent XAMPP and MAMP software packages, which are the easiest way of getting yourself a good development localhost server.
I am currently testing a web site as the development goes on, and almost every time the client script is updated, I need to clear the browser cache for a new functionality to become available on the client due to the fact that the browser downloads the fresh compy of the .js file.
What if in production I roll out a new version of a script? How do I get the client browsers to get it as soon as it is uploaded to the server?
I am using an ASP.NET MVC 4 site.
Easiest way will be adding the version number to the script file(say script_1.6.js etc)
Rename the file to create versioning:
so
<script src="myscript.js"></script>
becomes
<script src="myscript-9-5-2012.js"></script>
Also per https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching
It's not recommended to use querystrings for versioning (ie. myscript.js?v=1.1.0) because specifically
Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL ...
The best way to stop your scripts from caching is to add a random querystring value at the end of each line. e.g.
<script src="/path-to-your-script/script.js?v=0b1"></script>
This is great in development as your scripts never get cached, although in production you do really want the browser to cache the scripts to speed things up.
So for production, you would probably want to introduce some versioning like jquery for instance, jquery-1.8.0.js
I would like to make a js file external for my client... for example, I will give him a link like this:
http://mydomain.com/yourjs/this_is_your.js
But I may update the this_is_your.js and deliver to the user. So, my question is... how can I ensure the user get the latest .js file... So, I have an idea, when I made a new version, I just upload the latest this_is_your.js to the server, then when the web page polls again, the latest .js received. It works, but I would like something more generic... is that technically achievable? Any advices? Thank you.
You could do the same as GWT does. Have a small file (nocache.js) that wont be cached. In that file you refer to your latest version of your js file. Each version of the actual script has an unique name and therefore it can be cached.
Dynamically load a JavaScript file
How do I include a JavaScript file in another JavaScript file?
One problem I see with your scheme is that the version of javascript a client has is subject both to what you serve and to how recent the client's cached version of it is... Perhaps you can wrap your script file in a client-side request that takes into account a cookie that you can make obsolete when a new version is out. Just an idea, but I would worry about the performance.