Activating cache causes problems with javascript

The CMS Questions
1

I have the following problem: after activating Kirby’s Cache, the simple javascript buttons that toggle navigation and captions on my site only work when I come to a page for the first time. These javascript elements are on every page, so ignoring the cache on any single page won’t help. I have a lot of fairly big images on my site, so caching feels like a good thing to have. Any ideas if the problem is in my javascript, cache settings or can I do something else to fix this?

Here are my cache settings in config:

c::set('cache', true);
c::set('cache.driver', 'file');
c::set('cache.ignore', array('sitemap'));

And here the browser cache settings in .htcaccess:

<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 10 days"
	ExpiresByType text/css "access plus 1 week"
	ExpiresByType text/plain "access plus 1 month"
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType image/svg+xml "access plus 1 month"
	ExpiresByType application/javascript "access plus 1 week"
	ExpiresByType application/x-icon "access plus 1 year"
</IfModule>

And here is the javascript for the caption element:

// Shows the caption content.
(function caption() {
    var btn3 = document.getElementById('caption-open');
    if(btn3) {
    btn3.addEventListener('click', function () {
  document.getElementById("captionContent").classList.toggle("caption-show");
    }, false);
}})();

// Hides the caption content.
window.addEventListener('click', function(e) {
  if (e.target.matches('#caption-close')) {
    var captionContent = document.getElementById('captionContent');
      if (captionContent.classList.contains('caption-show')) {
        captionContent.classList.remove('caption-show');
}}}, false);
2

Hm, I don’t see why the JavaScript should break if the page is loaded from cache. There’s nothing in the code that gets generated on each page load by the backend.

Please try disabling the Kirby cache to test that anyway. If it still doesn’t work on subsequent page loads, it’s something else. :wink:

3

Thanks Lukas for your reply! I changed the cache settings to false, and everything works again like normal. I tried this on Safari 10, Chrome 57 and Firefox 52. Is there anything else I could try?

`c::set(‘cache’, false);``

4

As an afterthought: can the way I have placed the javascript file cause this problem?

I have placed it into assets/js/caption/caption.js along with its css file.

5

You’re showing your source code but have you checked what is happening on the buggy page?

  • Is the HTML code alright? Does it reference your JS code? Is the URL to your JS code correct?

If the HTML code seems outdated, you may have to clear the site/cache directory. I think Kirby only invalidate’s a page’s cache if the page’s content file was modified. If you modified some template or snippet, it might not be picked up and Kirby might serve a stale cached HTML.

If everything looks alright on this side, check that JS execution is working alright:

  • Are there errors in the JS console? Maybe another script is failing and halting script execution altogether.
  • Can you see the event listeners on their respective elements (you can see them as small “EV” buttons next to the element’s name in Firefox’s DevTools inspector… not yet in Chrome’s DevTools sadly)?
  • Are there errors happening when you click the buttons?
  • If your event handler functions are executed (check that with a console.log or adding debugger; in your function or adding a breakpoint in your browser’s DevTools), since you’re querying the DOM to retrieve some elements, you should check that you actually find the elements you’re interested in (again, you can use console.log or your browser’s debugger).
6

Thank you fvsch, checking the console.log in Firefox may have solved the problem!

Apparently there was in id that the javascript was referring to, that I had carelessly removed from the desktop version of my navigation. I put it back :relaxed:

I also had a piece of code in the navigation script referring to the caption element, that gave an error message. It wasn’t working anyway so I removed that :blush:

I still don’t know exactly why activating the cache caused these issues to surface, but fixing the errors helped. I also saw that there is a lot I can improve in my css and javascript, so that was helpful too!

Thanks once again!