View Full Version : refresh JS without refreshing HTML page

03-18-2012, 11:25 PM

I have been designing a schedule website which will be displayed on several computers throughout the building, I would like to be able to edit the JS during the day but I do not want to be going all through the building refreshing every computer to make sure it has the latest JS version. I also do not want use the meta HTML tag to refresh because that is too noticeable with the images reloading. Basically I would like to only refresh the JS file. I found this link, but it has a button which defeats the purpose.

Any way of doing this without the button?

FYI, I have the javascript setTimeout("driver()",1000); already so that the clock stays up to date. Not sure if that will make things easier or more complicated...

EDIT: not sure why the ICODE tags are not working

EDIT 2: Forgot the website! http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

03-19-2012, 12:12 AM
1. You can change the src attribute of a script tag on the page via Javascript. This will force a reload of the script (if not already cached). You can work around the cache by appending a random parameter. Be careful: The script will be loaded and executed! So the code in the global scope of the script will be re-executed automatically.

<script type="text/javascript" src="myscript.js"></script>

document.getElementsByTagName('script')[0].src = "myscript.js?" + (new Date()).getTime();

2. You can incorporate the above code part into the driver() function to refresh the script tag.
3. You used two opening icode tags and you forgot the closing /icode

03-19-2012, 01:25 AM

it is not working, it is still pulling the script from cache.

EDIT: I can see that the code is appending the parameter to the end in the Developer Tools panel (Chrome)

Old Pedant
03-19-2012, 03:06 AM
That website's code is wrong, you know. It will keep appending to the code already in the browser!

If you only ever replace *ALL* functions, then it will probably work, as JS will ignore all but the last function of the same name. But it's a crappy idea. You really should remove the existing code before appending the new code.

But there are and will be undesirable side effects of doing it this way. If you have any code that runs automatically (e.g., code not in a function) on page load, it *WILL* run each time you reload. And if that code does some page initializations, then those initializations will be done again and (for example) changes made by the user in the meantime may be lost. You will have to be very careful and selective when you do this. I'd certainly consider ensuring that you *ONLY* replace functions. Never any global variables or non-function code.

03-19-2012, 04:11 AM
1) there will be no customizations made by the user
2) the initialization code can be run every time. There is nothing there that will cause any issues.

Old Pedant
03-19-2012, 06:21 AM
Okay, so then the only thing you need to change is you need to delete the old code when adding the new.

03-19-2012, 07:18 AM
document.getElementsByTagName('script')[0].src = "";
document.getElementsByTagName('script')[0].src = "schedule.js?" + (new Date()).getTime();
is not working... how do I "delete the old code"?

Old Pedant
03-19-2012, 07:57 AM
Hmmm...you shouldn't have even needed that first line. The second line, assigning the JS file to the [0] element should have been enough.

Did you also remember to get rid of his bogus code that added a new <script> element to the page?

Show more code.

03-19-2012, 11:46 AM
I wasn't adding a new <script> element to the page. I am sorry if this was your impression. It was just an example of the existing script tag on the page (from which I wanted to set the src to force a reload).

03-19-2012, 03:18 PM
function driver() {
var nowhrs = new Date().getHours();
var nowmins = new Date().getMinutes();
var hrsmins = nowhrs + (nowmins/60);

master = document.getElementById("master");
schedule = document.getElementById("schedule");
time = document.getElementById("time");
announce = document.getElementById("announcements");

announce.innerHTML = announcement; // announcement is defined outside driver()

for (var i =0; i <scheduleArray.length; i++) { // schedule array is defined outside driver()
if ((hrsmins >= scheduleArray[i][1]) && (hrsmins < scheduleArray[i][2])) {
sched += writeTable(scheduleArray[i-1], "past");
sched += writeTable(scheduleArray[i], "current");
sched += writeTable(scheduleArray[i+1], "future");
sched += writeTable(scheduleArray[i+2], "future");
sched += writeTable(scheduleArray[i+3], "future");

schedule.innerHTML = sched;

document.getElementsByTagName('script')[0].src = "";
document.getElementsByTagName('script')[0].src = "schedule.js?" + (new Date()).getTime();

time.innerHTML = writeTime(nowhrs, nowmins);


everything is working except for the updating of the JS file. I want to be able to make post an announcement while the site is live on other computers.

03-20-2012, 11:35 PM
Hey guys!

I have figured out a solution to my problem, while it does cause the screen to flicker (which I was hoping to avoid) it does the job.

loadmin = new Date().getMinutes();

function driver() {
nowmins = new Date().getMinutes();


if (nowmins != loadmin) {