[SOLVED] Possible cache problem

[Rom_1983]

I'm using a HTML page declared in HFS as an index to serve.
In this page, I use Javascript to import HTML partials (it works, I've tested and validated it).
I then use a second JS script to operate on those snippets included in the main HTML.

Problem :
- The second script seems to fail because it doesn't find the nodes he's attempting to target. Indeed, when using console.log() function, it returns an empty node. Yet, both script are loaded at the end of the page, and the second script even wait for the complete loading of the page (in wich the first script import the partials). Also, I've used various technics like async functions, pauses, or await (to wait the first functions to load), with no result.
- When using the Google Chrome inspector, in the "Console" tab, I see that the node is empty (when using console.log() to debug).
- Sometimes it works, especially when I change the content of the 2nd JS script and refresh the page, indicating that a cache problem might occur. But as soon as I push the F5 key again, the script fails again, with the same error messages (again, this is a hint of a cache in action).


Debuging :
Everything works fine if I don't use the first script and just plain copy/paste the snippets in the main HTML, meaning that the 2nd script works.
But it doesn't work anymore if use the importation system : however, I can see in the source code of the page (fully loaded) that the snippets are correctly included.

Important information :
- I checked the "Disable cache" option in the "Network" tab of the inspector.
- I spam F5, Shift+F5, CTRL+F5, with no result.
- I use a DYNDNS to reach my own machine. I use this because : 1) I needed to host the HTML under a server for JS importation to work (because of CORS block), 2) I use a second machine to reach the HTML hosted on the first one, and 3) OBS Studio doesn't allow to reach a LAN machine, he wants a WAN address.

Actual conclusion :
- If Google Chrome doesn't cache, it may be the server serving files who does it.

QUESTION

Is HFS v2 caching things ? If yes, how to disable it for a specific index served ?

[LeoNeeson]

Hi!, I will try to help you...

I'm using a HTML page declared in HFS as an index to serve.
In this page, I use Javascript to import HTML partials (it works, I've tested and validated it). I then use a second JS script to operate on those snippets included in the main HTML.

Can you upload those files you use? (to try to replicate the error and think of a solution). In case these files contain private content, you can remove the private parts, and upload those files as a .zip file (as attachment on the forum).

[LeoNeeson]

In the meantime, the solution to avoid the cache, is adding a random number to the URL of your .js (JavaScript) files. I've asked you to upload the files, to give you a direct solution, but if you can do it by yourself (adapting it to your code), you can try something like this:

Code: [Select]

<script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="script.js?r='+ (new Date()).getTime() +'">\x3C/script>');
</script>
Or something like this:

Code: [Select]

<script>
    var axel = Math.random() + "";
    var num = axel * 1000000000000000000;
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'script2.js?r='+ num +'?');
    document.write(script.outerHTML);
</script>

Another possible solution (at server level, without changing your code).

1) In HFS, press Alt+F6 (or go to: Menu -> Other options -> Edit event scripts)

2) When it opens the 'hfs.events' file, paste the following code:

Code: [Select]

[pre-filter-request]
{.add header|Cache-Control: no-cache, no-store, must-revalidate.}
{.add header|Pragma: no-cache.}
{.add header|Expires: 0.}
This is the most cross-browser headers I've found to avoid cache (supporting HTTP 1.1, HTTP 1.0 and proxy clients). If you only need to support 'HTTP 1.1', then you can skip the last 2 headers ('Pragma: no-cache' and 'Expires: 0').

If my solution has solved your problem, leave a comment here, as reference for other users (in case someone comes with a similar issue in the future).

Hope this helps,
Leo.-

[LeoNeeson]

» Edit: after reading your message below...

Can you upload those files you use?

Can't do this for now, I need to complete my work for the next weeks. In a near future, I should share it on Github.
It's a simple HTML that allow to import other HTML in wich I create <article> of news, and the main HTML is then used in OBS Studio to display some news in a carrousel, one by one.

Don't worry, I don't need it (it was only to help you, but you have solved your problem)

Thanks for the answers @LeoNeeson, but I found the source of the problem : it was probably a mix of my Javascript bugging and of the URL I used in my second computer.

You're welcome, I'm glad you solved the issue. 

Cheers,
Leo.-

[Rom_1983]

Thanks for the answers @LeoNeeson, but I found the source of the problem : it was probably a mix of my Javascript bugging and of the URL I used in my second computer.

I used my real IP with the port :80, and I worked to rewrite my JS scripts.

After a simple test with the new URL showing that a simple HTML line was correctly displaying, I started to rework my code.

I found that my second script was not seing the first script DOM modification probably because it was doing it too fast. So I added a pause somewhere (after billions of rewrittings ^^) and it finally worked.

Here's an excerpt of my code if you want just an insight :

At the bottom of my <body>, I call my JS controller :

Code: [Select]

<script>
window.onload = function(){
jsController();
};
</script>
In my controller :

Code: [Select]

async function jsController() {

console.log("jsController() => Lancement.");
await includeAllPartials(root); // We import the HTML snippets.
// await includeHTML(); // To use with w3_includeHTML.js, alternatively of the includeAllPartials() method if it fails.
await pause(1000); // Absolutely necessary for the DOM to be rewritten after the importation, or launchCarrousel() won't find the nodes.
await launchCarrousel();

}
I made me going crazy for 6 hours, but I finally found the light.

Can you upload those files you use?

Can't do this for now, I need to complete my work for the next weeks. In a near future, I should share it on Github.
It's a simple HTML that allow to import other HTML in wich I create <article> of news, and the main HTML is then used in OBS Studio to display some news in a carrousel, one by one.

In the meantime, the solution to avoid the cache, is adding a random number to the URL of your .js (JavaScript) files

That's a crazy good workaround. I'll try to remember it the next time I'll face such a "cache" suspicion. ^^

Cheers.

PS : go to twich.tv/sandwich_ttv if you want to watch the carrousel in action in my VODs.