Load javascript file every time a new page is loaded

Question

I'm using http://instantclick.io on my website (a pjax jquery plugin) and I'm experiencing some problems regarding javascripts. It's very temperamental - sometimes a page will load with all the scripting working fine, but other times parts of the scripts will not run. Also, scripts are running more than once. For example, if I set a console log in a .click() function, I'll see the console log multiple times when there should only be one.

In the instantclick.io documentation, it explains how to load a script on each page load:

If you have a snippet of JavaScript that you need to execute on every page change, use the following: InstantClick.on('change', yourCallback);

But I need to run a whole js file rather than just a function. I have tried wrapping InstantClick.on('change', function(){ around my whole js file, but the scripts are still not running again after a new page is opened.

In my console, I'm seeing lots of errors relating to functions being undefined, which would indicate that the files are not being loaded each time.

How would I solve this? Thanks!

Answer 1

Write in callback code like this for adding js file dynamically to DOM

  var jsFile=document.createElement('script');
  jsFile.setAttribute("type","text/javascript");
  jsFile.setAttribute("src", link);
  document.getElementsByTagName("head")[0].appendChild(jsFile);

And change link to url path to your js file.

Answer 2

use it like this

 long dateTimeSec = new Date().getTime();
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css?v=<%=dateTimeSec%>">