1

Update: this turned out to be a memory cache issue where both Firefox and Chrome were pulling the properties.js file from memory cache on each page refresh instead of downloading a fresh version from the server. The Network tab tip from below comments allowed me to see this behavior. Thanks for that!

Using meta tagging in the HTML files as follows did not help at all:

    <meta http-equiv=“Pragma” content=”no-cache”>
    <meta http-equiv=“Expires” content=”-1″>
    <meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>

I am developing a UI dashboard with multiple HTML5 pages that show values that change every few minutes. The values come from APIs that I parse with JQ and then use bash to update a properties.js file. The multiple HTML5 pages src this properties.js file to assign values to JavaScript variables in the HTML5 pages.

The problem is, this works for the 1st HTML5 page but the 2nd HTML5 page is not getting the values. If I comment out the 1st page's "src" line, the 2nd page gets the values. Seems the way I am doing this is only good for populating values into a single HTML5 page. I would rather not clone the properties file for each HTML page. I am trying to find a way to make all HTML5 pages populate the values from a single properties.js file.

[FILE1.HTML]


<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
   document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>

[FILE2.HTML]

<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
   document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>

[PROPERTIES.JS]

var ts1_info;
ts1_info = {
    var1: "my_value",
    ...
;

[File Hierarchy]


page1.html
      |
      |_ page2.html
      |_ properties.js

In page1.html the src line is going down 1 level as such:

<script type="text/javascript" src="./sub_directory/properties.js"></script>

In page2.html the src line is going to the same level:


<script type="text/javascript" src="./properties.js"></script>
Sylk
  • 11
  • 1
  • 4
  • Importing the js file should work fine for any amount of html pages. Is the problem occurring when you click a link from one page to the next, or even if you go to the second page directly the variables won't be available? – Ace Jun 21 '19 at 01:38
  • When I use the same code in FILE1.HTML as I do in FILE2.HTML to assign values to variables, it works for the 1st file but the values remain empty in the 2nd file. A work-a-round I am using is to clone the properties.js to another name like properties2.js. When page2.html has a unique file name in the src line, everything works. It's only an issue when I use the "same" file name in the src line in more than 1 html file. – Sylk Jun 21 '19 at 03:51
  • 1
    What I'm understanding is that you are trying to set the variables in properties.js from FILE1.html and access those set values in FILE2.html. If that is what you are trying to do, it will not work. – Ace Jun 21 '19 at 03:56
  • No, that is not what I am attempting. What I am doing is using bash/jq/APIs to create a single JavaScript file with numerous key:value pairs that multiple HTML5 pages will use to assign values to variables. The bash/jq/APIs run every minute and update the values in the properties.js file, which in turn reflect updated values in the HTML5 pages upon page refresh. – Sylk Jun 21 '19 at 04:20
  • Hmm...yea it doesn't make any sense to me why that wouldn't be working. Check the Network tab in devtools to see if the second page is receiving the file. – Ace Jun 21 '19 at 04:28
  • I think this is a browser cache issue. Looking at the Network tab as you suggested, I can see that both Firefox and Chrome are not grabbing the updated properties.js file. Instead, they are both grabbing it from cache. Pressing F5 to refresh grabs from cache. The 1st time it loads in a Private Browse session, it downloads it. But, then it grabs from cache on refresh, missing the updates the properties.js file is getting each minute. I need to figure out how to force browsers to download the properties.js file instead of getting from cache. – Sylk Jun 21 '19 at 05:28

4 Answers4

0

Try to store variables in local storage that you want to access across other pages. Local storage allow to save key/value pairs in a web browser, so when variable is updated by one page it will be also available to another page.

Codesigner
  • 578
  • 3
  • 16
  • Local storage has dependencies on the browser and allow data to persist. The values in properties.js are updated every minute from a cron job wget'ing API data, parsing it with JQ, then pushing values to the properties.js file using Bash.. I would much rather keep the properties.js file as the single source of truth for the HTML content and not add a local storage layer. – Sylk Jun 21 '19 at 04:24
0

You normally don't use . in the path of linking to script files, try

<script type="text/javascript" src="sub_directory/properties.js"></script>

and

<script type="text/javascript" src="properties.js"></script>

It really makes no sense that it works for a different file name, but not the same one.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
0

This appears to be a browser cache issue. I need to figure out how to force both Chrome and Firefox to download the properties.js file freshly on every page refresh instead of getting from cache.

Sylk
  • 11
  • 1
  • 4
  • Then build a JavaScript app that polls an api rather than including a js file for data. – Adrian Brand Jun 21 '19 at 08:46
  • Agreed. Polling via xhr or receiving updates via web sockets is ideal. – Ace Jun 21 '19 at 12:13
  • I agree as well, however, this is my first heavy JavaScript project and deadlines won't allow for a redesign (and learning new things like polling and parsing the APIs in pure JavaScript) at this point. I will look into the better ways you both recommended for next release. Thanks much! – Sylk Jun 21 '19 at 17:28
  • This thread answered the browser memory cache issue: https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-js-files – Sylk Jun 24 '19 at 01:23
0

Something I tent to do when I want to prevent my scripts from being cached is to add a parameter at the end of the file path like so: scripts.js?v=0001 or in my php projects, I use npm to add a uuid to the end of the file name everytime it is updated.

You can checkout more here: How to Prevent Caching of Javascript

Just trying to point you in the right direction! Hope this helps.

Matthew
  • 922
  • 1
  • 6
  • 21