How to NOT cache external txt files used to update live project?

Using JavaScript with Hype
1

I've successfully created a Hype project (latest full version) that loads a text files to display content on various scenes. The purpose is the text gets updated more often than the Hype file. But, while the text changes in the physical file, it does not update the online project content.

I've used the code posted by @Daniel and that works just fine. It's just that I need republish the whole project each time so the ***.js?12345 changes to create some uniqueness.

    function loadCosts(hypeDocument, element, event) {
		var txtFile = new XMLHttpRequest();
		txtFile.open("GET", "https://sgdesign.com/[REDACTED]/costs.txt", true);
		txtFile.onreadystatechange = function() {
  		if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
    		if (txtFile.status === 200) {  // Makes sure the file has been found.
      		allText = txtFile.responseText; 
     		 //lines = txtFile.responseText.split("\n"); // Will separate each line into an array
      		var customTextElement2 = hypeDocument.getElementById('Costs');
		customTextElement2.innerHTML = txtFile.responseText;
  		    }
		  }
		}
txtFile.send(null);
}

I've tried adding :

<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">

to the Head HTML but that did not change anything.

Ideally it would be nice to just clear cache from specific scenes to preserve the benefits of caching other elements on other pages.

Any solve this problem?

2
1 Like
3

So you would add these lines to attempt to request using no-cache headers right after txtFile.open("GET", "https://sgdesign.com/[REDACTED]/costs.txt", true);

txtfile.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");
txtfile.setRequestHeader("Pragma", "no-cache");
txtfile.setRequestHeader("Expires", "0");
4

Thanks for that suggestion. But, it now breaks loading the external txt file in it's entirety.

I'll create an abridged test project and upload it as well as post the URL.

Screen Shot 2022-02-01 at 8.56.39 AM
Screen Shot 2022-02-01 at 8.56.39 AM1644×670 177 KB

5

I've created a culled down version of my project. You can see here how the home page loads a remote text file without problem. Then there are two linked scenes (Costs and Healthcare). Costs fails to load the external file while healthcare does load the external file.

Code for the scene that does not loads the external file let alone allow testing of not caching:

	var txtFile = new XMLHttpRequest();
		txtFile.open("GET", "https://sgdesign.com/test/costs.txt", true);
		 txtfile.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");
		 txtfile.setRequestHeader("Pragma", "no-cache");
		 txtfile.setRequestHeader("Expires", "0");
		txtFile.onreadystatechange = function() {
		  if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
		    if (txtFile.status === 200) {  // Makes sure the file has been found.
		      allText = txtFile.responseText; 
		      //lines = txtFile.responseText.split("\n"); // Will separate each line into an array
		      var customTextElement2 = hypeDocument.getElementById('Costs');
		customTextElement2.innerHTML = txtFile.responseText;
		    }
		  }
		}
		txtFile.send(null);

text files included in the zip file and I expect rebuilding the project from the hyperesources file is the best way to provide reference.
Archive.zip (912.6 KB)

6

it's a typo ...

txtFile vs txtfile

2 Likes
7

Thank you! You guys are heros :slight_smile:

The code now works perfectly allowing updates and not caching the old txt file.

Thanks again @Daniel and @h_classen