JS Will not refresh with caching disabled - javascript

I have tried everything I can think of including appending .js files with ?ver=blah, and the browser still loads the old version of my script.
If I pull the script .js file up in the browser directly it is still the old file.
If I download it through FTP I get the new file.
I have tried both chrome and firefox browser(I installed FireFox fresh AFTER writing the new JS file, and somehow firefox is STILL loading the old file, which it had never even been exposed to...?)
I added this code at line 30 in the latest verson:
if (lastRecipeBlockIndex == parent.children().size()) {
//find tallest column and set parent div height to match
var tallID = 0;
for (var i = 0; i < columnHeights.length; i++){
if (columnHeights[i] > columnHeights[tallID])
tallID = i;
}
parent.height(columnHeights[tallID]);
return;
}
Line 31 used to be a return statement.
Url to this file: http://tmurraywellness.com/wp-content/plugins/TM%20Code/TM-script.js?ver=0.01j
What does anyone else see?
The server has to be sending the wrong file. Caching is impossible since I have changed the url. Caching as mentioned is disabled anyway with dev-tools open in both browsers(I manually ticked the box to make that happen)
Any suggestions? I am desperate. I have spent hours trying to get the ten lines of code below to execute in my browser(s)

Related

Open Explorer window from Website, on mounted drives, including javascript in the link reference to generate the path

In addition to the question here:
Open Explorer window from Website
I'm also having trouble with this, especially because I need to integrate a function into the link that eventually will open in file explore.
Bacially, we have a very simple intranet webpage, to control our cases etc.
Each case has some files in in a folder on the server, but to avoid to many subfolders in one folder, we split them in groubs of 200!
\ip\fileserver\cases\"split-folder"\subfolder
I what to open the folder clicking on the case on our webpage.
The split-folder..is defined in ranges with case-numbers for evey 200 cases (sager in danish)
Like this
\25000-25199\25001
\25200-25399\25399
\25400-25599\25422 or 25555 etc . .
The math to calculate the "split-folder" is simple enough with a script but getting this into a link that will open file explore is not that easy.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(25555)">Try it</button>
<p id="sagslink"></p>
<script>
function myFunction(sagnr) {
var a = Math.floor(sagnr/200)*200
var b = Math.floor(a+199);
var x = "file://///192.168.15.133/Filserver2016/sager/" + a + '-' + b + "/"+sagnr;
document.getElementById("sagslink").innerHTML = x;
}
</script>
Simple link that Works in IE..but not in firefox og chrome.
sager-full-path
But I can not generate a useful link merging the to!
I have tried evey possible way described here to no awail:
JavaScript function in href vs. onclick
Perhaps I need to revice the function to give the actual link in sted. I also don't what a button but just a generat CASE-Number...that serves as link!
Further more! We mount \\192.168.1.133\Fileserver2016 as Z:
So for our various programs, that use the Z drive path, I would like to open file-explore with the mount path and not the ablosoute path.
We can use IE if nessarry..but I would like i to work on firefox and chrome also
Can this be done!
Ok. So we got it working...sort of ;O)
Our intranet webpage runs in ASP
So the code runs serverside.
Here is the code that works in IE-11.
<%
strSagsNR = rsSag("sagsNR")
Function folderlink(FSagsNR)
a = int(strsagsNR/200)*200
b = int(a+199)
folderlink = "file:///Z:/sager/" & a & "-" & b & "/" & strSagsNR
End Function[enter image description here][1]
%>
To ensure the solution works properly locally and when connected with VPN.
It's necessary to add the server ip to IE-11 Internet security - local Intranet - Webplaces - Advanced
as BOTH FILE AND HTTP! See image.
Security setting in IE
Then you should avoid the remark about this file is dangerous and may harm you computer, and File explore will pop up on the correct path ;O)
I have not found any solution for Chrome or Firefox.

How to render Paypal Smart Button based on environment?

I'm able to add the paypal button in my site with live client id and it works all good, however for development purposes I use my sandbox client id when testing locally and this means always changing the client id in the src:
<script src="https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&currency=GBP&disable-funding=credit,card">
</script>
I created a js file which loads different script files depending on the environment the site is being run on -
const LOCAL_DOMAINS = ["localhost", "127.0.0.1", ""];
var paypalTestScript = 'https://www.paypal.com/sdk/js?client-id=AXQBIcWjoGGdwc1GXUtX9fx7o_U3lUIcmShJCa7FcJYX8MVOXa20yy1M7FgLdHPmEsWmU30ChP1X9xJJ&vault=true&currency=GBP&disable-funding=credit,card';
var paypalLiveScript = 'https://www.paypal.com/sdk/js?client-id=AYw0JC4IjiptK8Dyv--SPi98ze5My9hgTOmD_ckO8u197I56tpOtinZAu7p2flNCPGk5ZezoYSNS-U4Z&vault=true&currency=GBP&disable-funding=credit,card';
var paypalScriptToUse = "";
if (LOCAL_DOMAINS.includes(window.location.hostname)) {
paypalScriptToUse = paypalTestScript;
} else {
paypalScriptToUse = paypalLiveScript;
}
var script = document.createElement('script');
script.setAttribute('src', paypalScriptToUse);
document.head.appendChild(script);
Yet the paypal smart button is being very inconsistent in rendering as it works 1 out of 7/8 times. Is there a stable way of loading the scripts dynamically?
Your code appears as though it'll work, I think you've created the right sort of hack for this sort of dynamic environment loading based on URL, although I've never seen this done before. Typically people switch between environments at a much slower rate, perhpas a few times a day at most, so commenting out and uncommenting two lines at the top of the page, i.e.:
<script>for sandbox...(currently uncommented)</script>
<!--
<script>for live...(currently commented out)</script>
-->
..has been sufficient for all the development use cases I've observed up til now.
Your issue of "it works 1 out of 7/8 times" can't be looked into without more data, like a full runnable snippet we can test and reproduce the same with

Run Photoshop Script only after all files were opened

I am trying to make Photoshop tell me how many Files were opened in Photoshop.
Of course I can always go and check in finder, how mnay files I tried to open - but that is not always accurate, sometimes for unknown reason files are skipped. I could also go and count manually, although that takes very long. I've written a simple script which tells me how many file were opened.
if (!documents.length) alert("No Open documents");
else alert(documents.length + " images opened");
At the moment I simply put it into the action. I open all the files, 200 images, run the action - I receive a pop up message. It is great.
But is there a way to make it automatic? To make the script run only on the last file opened? How would I go about automating it?
Maybe you can use a script to open the files instead of Open command? The script will ask for files location as Open command normally would but in the end you can do whatever you want when files were opened.
var inputFiles = File.openDialog(undefined, undefined, true); //multiselect: true
if (inputFiles != null)
{
for (var i = 0; i < inputFiles.length; i++)
{
open(inputFiles[i]);
}
alert(documents.length);
}

does window.location.reload(true) clear cache of asynchronous loaded resources? [duplicate]

How do I clear a browsers cache with JavaScript?
We deployed the latest JavaScript code but we are unable to get the latest JavaScript code.
Editorial Note: This question is semi-duplicated in the following places, and the answer in the first of the following questions is probably the best. This accepted answer is no longer the ideal solution.
How to force browser to reload cached CSS/JS files?
How can I force clients to refresh JavaScript files?
Dynamically reload local Javascript source / json data
Update: See location.reload() has no parameter for background on this nonstandard parameter and how Firefox is likely the only modern browser with support.
You can call window.location.reload(true) to reload the current page. It will ignore any cached items and retrieve new copies of the page, css, images, JavaScript, etc from the server. This doesn't clear the whole cache, but has the effect of clearing the cache for the page you are on.
However, your best strategy is to version the path or filename as mentioned in various other answers. In addition, see Revving Filenames: don’t use querystring for reasons not to use ?v=n as your versioning scheme.
You can't clear the cache with javascript.
A common way is to append the revision number or last updated timestamp to the file, like this:
myscript.123.js
or
myscript.js?updated=1234567890
Try changing the JavaScript file's src? From this:
<script language="JavaScript" src="js/myscript.js"></script>
To this:
<script language="JavaScript" src="js/myscript.js?n=1"></script>
This method should force your browser to load a new copy of the JS file.
Other than caching every hour, or every week, you may cache according to file data.
Example (in PHP):
<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>
or even use file modification time:
<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>
You can also force the code to be reloaded every hour, like this, in PHP :
<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>
or
<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>
window.location.reload(true) seems to have been deprecated by the HTML5 standard. One way to do this without using query strings is to use the Clear-Site-Data header, which seems to being standardized.
put this at the end of your template :
var scripts = document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){
for(var j=0;j<torefreshs.length;j++){
if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
scripts[i].src = new_src; // change src in order to refresh js
}
}
}
try using this
<script language="JavaScript" src="js/myscript.js"></script>
To this:
<script language="JavaScript" src="js/myscript.js?n=1"></script>
Here's a snippet of what I'm using for my latest project.
From the controller:
if ( IS_DEV ) {
$this->view->cacheBust = microtime(true);
} else {
$this->view->cacheBust = file_exists($versionFile)
// The version file exists, encode it
? urlencode( file_get_contents($versionFile) )
// Use today's year and week number to still have caching and busting
: date("YW");
}
From the view:
<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">
Our publishing process generates a file with the revision number of the current build. This works by URL encoding that file and using that as a cache buster. As a fail-over, if that file doesn't exist, the year and week number are used so that caching still works, and it will be refreshed at least once a week.
Also, this provides cache busting for every page load while in the development environment so that developers don't have to worry with clearing the cache for any resources (javascript, css, ajax calls, etc).
or you can just read js file by server with file_get_contets and then put in echo in the header the js contents
Maybe "clearing cache" is not as easy as it should be. Instead of clearing cache on my browsers, I realized that "touching" the file will actually change the date of the source file cached on the server (Tested on Edge, Chrome and Firefox) and most browsers will automatically download the most current fresh copy of whats on your server (code, graphics any multimedia too). I suggest you just copy the most current scripts on the server and "do the touch thing" solution before your program runs, so it will change the date of all your problem files to a most current date and time, then it downloads a fresh copy to your browser:
<?php
touch('/www/control/file1.js');
touch('/www/control/file2.js');
touch('/www/control/file2.js');
?>
...the rest of your program...
It took me some time to resolve this issue (as many browsers act differently to different commands, but they all check time of files and compare to your downloaded copy in your browser, if different date and time, will do the refresh), If you can't go the supposed right way, there is always another usable and better solution to it. Best Regards and happy camping.
I had some troubles with the code suggested by yboussard. The inner j loop didn't work. Here is the modified code that I use with success.
function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
var scripts = document.getElementsByTagName('script');
for(var i = 0; i < scripts.length; i++) {
var aScript = scripts[i];
for(var j = 0; j < toRefreshList.length; j++) {
var toRefresh = toRefreshList[j];
if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
// console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
aScript.src = new_src;
}
}
}
}
If you are using php can do:
<script src="js/myscript.js?rev=<?php echo time();?>"
type="text/javascript"></script>
Please do not give incorrect information.
Cache api is a diferent type of cache from http cache
HTTP cache is fired when the server sends the correct headers, you can't access with javasvipt.
Cache api in the other hand is fired when you want, it is usefull when working with service worker so you can intersect request and answer it from this type of cache
see:ilustration 1 ilustration 2 course
You could use these techiques to have always a fresh content on your users:
Use location.reload(true) this does not work for me, so I wouldn't recomend it.
Use Cache api in order to save into the cache and intersect the
request with service worker, be carefull with this one because
if the server has sent the cache headers for the files you want
to refresh, the browser will answer from the HTTP cache first, and if it does not find it, then it will go to the network, so you could end up with and old file
Change the url from you stactics files, my recomendation is you should name it with the change of your files content, I use md5 and then convert it to string and url friendly, and the md5 will change with the content of the file, there you can freely send HTTP cache headers long enough
I would recomend the third one see
You can also disable browser caching with meta HTML tags just put html tags in the head section to avoid the web page to be cached while you are coding/testing and when you are done you can remove the meta tags.
(in the head section)
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>
Refresh your page after pasting this in the head and should refresh the new javascript code too.
This link will give you other options if you need them
http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/
or you can just create a button like so
<button type="button" onclick="location.reload(true)">Refresh</button>
it refreshes and avoid caching but it will be there on your page till you finish testing, then you can take it off. Fist option is best I thing.
I tend to version my framework then apply the version number to script and style paths
<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>
Cache.delete() can be used for new chrome, firefox and opera.
I found a solution to this problem recently. In my case, I was trying to update an html element using javascript; I had been using XHR to update text based on data retrieved from a GET request. Although the XHR request happened frequently, the cached HTML data remained frustratingly the same.
Recently, I discovered a cache busting method in the fetch api. The fetch api replaces XHR, and it is super simple to use. Here's an example:
async function updateHTMLElement(t) {
let res = await fetch(url, {cache: "no-store"});
if(res.ok){
let myTxt = await res.text();
document.getElementById('myElement').innerHTML = myTxt;
}
}
Notice that {cache: "no-store"} argument? This causes the browser to bust the cache for that element, so that new data gets loaded properly. My goodness, this was a godsend for me. I hope this is helpful for you, too.
Tangentially, to bust the cache for an image that gets updated on the server side, but keeps the same src attribute, the simplest and oldest method is to simply use Date.now(), and append that number as a url variable to the src attribute for that image. This works reliably for images, but not for HTML elements. But between these two techniques, you can update any info you need to now :-)
Most of the right answers are already mentioned in this topic. However I want to add link to the one article which is the best one I was able to read.
https://www.fastly.com/blog/clearing-cache-browser
As far as I can see the most suitable solution is:
POST in an iframe. Next is a small subtract from the suggested post:
=============
const ifr = document.createElement('iframe');
ifr.name = ifr.id = 'ifr_'+Date.now();
document.body.appendChild(ifr);
const form = document.createElement('form');
form.method = "POST";
form.target = ifr.name;
form.action = ‘/thing/stuck/in/cache’;
document.body.appendChild(form);
form.submit();
There’s a few obvious side effects: this will create a browser history entry, and is subject to the same issues of non-caching of the response. But it escapes the preflight requirements that exist for fetch, and since it’s a navigation, browsers that split caches will be clearing the right one.
This one almost nails it. Firefox will hold on to the stuck object for cross-origin resources but only for subsequent fetches. Every browser will invalidate the navigation cache for the object, both for same and cross origin resources.
==============================
We tried many things but that one works pretty well. The only issue is there you need to be able to bring this script somehow to end user page so you are able to reset cache. We were lucky in our particular case.
window.parent.caches.delete("call")
close and open the browser after executing the code in console.
Cause browser cache same link, you should add a random number end of the url.
new Date().getTime() generate a different number.
Just add new Date().getTime() end of link as like
call
'https://stackoverflow.com/questions.php?' + new Date().getTime()
Output: https://stackoverflow.com/questions.php?1571737901173
I've solved this issue by using
ETag
Etags are similar to fingerprints, and if the resource at a given URL changes, a new Etag value must be generated. A comparison of them can determine whether two representations of a resource are the same.
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete
Cache.delete()
Method
Syntax:
cache.delete(request, {options}).then(function(found) {
// your cache entry has been deleted if found
});

Preload JS, but don't run it

I want to preload a large JS file after a page has loaded, so that when I link to that JS file on the required page it is already downloaded and cached.
I'm basically doing this at the moment, and it works, but of course it's not the right way:
preload_js = new Image();
preload_js = "http://domain.com/files/file.js";
This seems such a quick and simple method, no Ajax needed etc. and it works great.
What's the proper way to do this? Surely not with Ajax as that seems overkill for this.
I know there's lots of methods for loading JS but they all seem to actually run the code after the script has loaded, which I don't want.
I don't want to use jQuery (or any library), it must be plain JS. Thanks for any help.
From this blog post:
Preloading components in advance is good for performance. There are
several ways to do it. But even the cleanest solution (open up an
iframe and go crazy there) comes at a price - the price of the iframe
and the price of parsing and executing the preloaded CSS and
JavaScript. There's also a relatively high risk of potential
JavaScript errors if the script you preload assumes it's loaded in a
page different than the one that preloads.
After a bit of trial and lot of error I think I came up with something
that could work cross-browser:
in IE use new Image().src to preload all component types
in all other browsers use a dynamic <object> tag
In this example I assume the page prefetches after onload some
components that will be needed by the next page. The components are a
CSS, a JS and a PNG (sprite).
window.onload = function () {
var i = 0,
max = 0,
o = null,
// list of stuff to preload
preload = [
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0;
for (i = 0, max = preload.length; i < max; i += 1) {
if (isIE) {
new Image().src = preload[i];
continue;
}
o = document.createElement('object');
o.data = preload[i];
// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; // IE
o.width = 0;
o.height = 0;
// only FF appends to the head
// all others require body
document.body.appendChild(o);
}
};
See the post for more details.
EDIT: Looking at the comments on that post, someone mentions this link, which talks about the problems with the new Image() preload method in IE and other browsers. Here's an excerpt:
When IE encounters an IMG tag, it creates an image object and assigns
the download request to it. As data arrives from the image download,
it’s fed into the browser's image decoders. The decoders will reject
data as malformed if you feed them plaintext, which seems reasonable,
since they can't possibly make use of such data. When the decoders
reject the data as "Not possibly an image," the image object will
abort its processing. As a part of that abort, if the download has not
yet completed, it too is aborted.
This explains the behavior mentioned by the OP in the comment below (IE9 only downloading 4KB of the file).
It seems like your only reliable cross-browser option may be to use Ajax...
USE
window.document.onload =function(){
preload_js = "http://domain.com/files/file.js";
}
window.document.onload make sure the java script will not run until you dom is ready
Considering the cross domain issues with Ajax, especially since there really is no way to load a file on a server you have no control over (e.g. Google CDN hosting jQuery), this is my solution:
(1) Use the document.createElement('object') part in Simon M's solution for Firefox as that works great.
(2) Use the new Image.src thing for every other browser. Opera, Safari and Chrome love it. Also, I mentioned earlier that Mobile Safari doesn't work. Well it does, but for some reason takes 100ms verifying something (it is properly cached and it isn't just returning a 304 not modified). I can live with 100ms.
I've not tested other mobile browsers.
(3) Bollocks to IE as nothing works.

Categories