How to force a reload of JS and CSS files when changed

April 10th, 2013

Caching of Javascript and CSS files is great and really improves performance in the browser. But caching also means that changes to the files are not picked up. So how do you get the browser to automatically reload the files when you have updated them because of new requirements, bug fixed etc.?

There are several ways to achieve this. On Apache you can for instance use the modpagespeed module that automatically changes links to resources when the backend resource files change. Other ways include manually adding a version number to your resources (?version=1234), and changing the file name of the resource.

For IBM Domino, IBM XWork Server and XPages you can of course manually change the file name of your resources when content changes (and remember to update references to those files in your code). A better method is to create your own versioning system for your resources based on the idea of adding a unique id to the link to the resources. The following describes this method.

You can add a version number to an application scoped bean and then update that version number whenever you want the browser to reload your resources. Here's a code snippet for such a version number bean (this is only some of the stuff needed for a bean - see my blog post about creating a bean for more details) :

public class Config implements Serializable {
	private static final long serialVersionUID = 6469339826789980362L;
	private static final String version = "20130410";

	public static String getVersion() {
		return version;

Using this bean I can then create links to my Javascript and CSS files like this:

	<xp:script clientSide="true">
		<xp:this.src><![CDATA[${javascript:"/jsCommon?open&v=" + config.getVersion()}]]></xp:this.src>
		<xp:this.href><![CDATA[${javascript:"/custom.css?open&v=" + config.getVersion()}]]></xp:this.href>

The links then look like this in the browser:


Whenever I want to force a reload, I then update the version string in my Config bean. The resources are then reloaded.

Tags: , ,

10 Responses to “How to force a reload of JS and CSS files when changed”

  1. Urs Meli Says:

    Nice tip

  2. Sven Hasselbach Says:

    Good idea. Thanks for sharing!

  3. Oliver Busse Says:

    Good concept! How to simplify this by using "native" SSJS?


    This will calculate a new id with every reload in the browser. Sure this might not be an appropiate approach in a productive environment but while developing - if the browser likes to cache "too much".

  4. Per Henrik Lausten Says:

    Hi Oliver, as you say yourself, calculating a new id on every request is not useful in production but can be useful during development.

    For development purposes you can also use Chrome Developer Tools and set it up to disable cache (when Developer Tools is open).

  5. Anders Magnusson Says:

    Great tip.

    My question is how I implement this technique through a theme?
    How do I write the ""?

    This is how our resources loaded via a theme:


  6. Per Henrik Lausten Says:

    Anders, you can use SSJS in your theme. So you should be able to calculate the href part like this:

    < href > #{javascript:"main.css?open&v=" + config.getVersion() } < /href >

  7. jao lin Says:

    nice tip but i can't apply it

    in my browser the link hasn't like this:

    but it is in this:


    in which every special character is decodified, so the browser doesn't work correctly.

    can u help me

  8. Anders Magnusson Says:

    Hello again,

    Tried to use the technique to run javascript in the theme.
    But when writing it in the way you propose the server isn't interpreting the code as javascript and returns the whole code-string as the name of the css.

    Any ideas on how to write/implement the SSJS in the theme in a way that the server understands?

    Maybe using something like inside the ?

    (I don't really understand how the servers transforms the tags used)

  9. Thomas Adrian Says:

    Here is a stackoverflow thread on the same topic

    How to force update of design changes to clients using xPages?

  10. Upgrading Domino causes issues with CKEditor for Chrome users - FoCul Says:

    […] weirdness” after upgrades. These are usually sorted after clearing the cache. Per Henrik Lausten has posted a good scheme to minimise these issues but he says it does not help with the CK Editor […]