September 12, 2013

Testing JavaScript With Firefox – refresh does not seem to always refresh JavaScript

KDawg’s Question:

I am testing on a live server and editing JavaScript on the CodeIgniter framework there.
I am testing it in Firefox.

Typically I make some javascript changes and then save my edits via FTP, hit refresh in the browser, look for my changes and carry on.

For some reason – the newly saved javascript is not always showing up when I refresh.
I am sure it is nothing like, I forgot to upload, or did not wait for it to fully save – as I have tested this a number of times – simply adding an alert and refreshing – looking for the alert…. sometimes it is not there… Second refresh… there it is.

Anyone know what gives or how to ensure the refresh picks up the changes?

Thanks all 🙂

This particular problem is caused by caching. It is both useful and sometimes pain. JavaScript Library like jQuery uses a simple technique when we add script to the DOM. It appends a random key at the end of file, thus faking the HTTP request as new.

Normally, you would not require the script to change when viewed by the user, but when you are developing it becomes a real pain. So during those time, just add some random text at the end of every file during load or if you are too lazy to do that, send a header saying to clear the cache.

In PHP something like at the top will do it:

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1990 05:00:00 GMT");

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!