How to force a script reload and re-execute

Question

I have a page that is loading a script from a third party  news feed   The src url for the script is assigned dynamically on load up  per third party code     lt div id  div1287  gt       lt  -- dynamically-generated elements will go here  -- gt   lt  div gt    lt script id  script0348710783  type  javascript text  gt   lt  script gt    lt script type  javascript text  gt      document getElementById  script0348710783   src  http   oneBigHairyURL    lt  script gt    The script loaded from http   oneBigHairyURL then creates and loads elements with the various stuff from the news feed  with pretty formatting  etc  into div1287  the Id  div1287  is passed in http   oneBigHairyURL so the script knows where to load the content    The only problem is  it only loads it once  I d like it to reload  and thus display new content  every n seconds   So  I thought I d try this    lt div id  div1287  gt       lt  -- dynamically-generated elements will go here  -- gt   lt  div gt    lt script id  script0348710783  type  javascript text  gt   lt  script gt    lt script type  javascript text  gt      loadItUp function             alert  loading               var divElement   document getElementById  div1287            var scrElement   document getElementById  script0348710783             divElement innerHTML             scrElement innerHTML             scrElement src             scrElement src  http   oneBigHairyURL           setTimeout loadItUp  10000              loadItUp     lt  script gt    I get the alert  the div clears  but no dynamically-generated HTML is reloaded to it   Any idea what I m doing wrong

User · Answer

Use this function to find all script elements containing some word and refresh them.

_x000D_

function forceReloadJS(srcUrlContains) {_x000D_
  $.each($('script:empty[src*="' + srcUrlContains + '"]'), function(index, el) {_x000D_
    var oldSrc = $(el).attr('src');_x000D_
    var t = +new Date();_x000D_
    var newSrc = oldSrc + '?' + t;_x000D_
_x000D_
    console.log(oldSrc, ' to ', newSrc);_x000D_
_x000D_
    $(el).remove();_x000D_
    $('<script/>').attr('src', newSrc).appendTo('head');_x000D_
  });_x000D_
}_x000D_
_x000D_
forceReloadJS('/libs/');

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

_x000D_

User · Answer

How about adding a new script tag to  lt head  with the script to  re load  Something like below    lt script gt     function load js              var head  document getElementsByTagName  head   0         var script  document createElement  script          script src   source file js         head appendChild script           load js     lt  script gt    The main point is inserting a new script tag -- you can remove the old one without consequence   You may need to add a timestamp to the query string if you have caching issues

User · Answer

Have you tried removing it from the DOM  then inserting it back again   I just did  that doesn t work  However  creating a new script tag and copying the contents of the existing script tag  then adding it  works well    See my example  http   jsfiddle net mendesjuan LPFYB   var scriptTag   document createElement  script    scriptTag innerText    document body innerHTML     Here again --- lt BR gt      var head   document getElementsByTagName  head   0   head appendChild scriptTag    setInterval function         head removeChild scriptTag       var newScriptTag   document createElement  script        newScriptTag innerText   scriptTag innerText      head appendChild newScriptTag       scriptTag   newScriptTag         1000     This won t work if you expect the script to change every time  which I believe is your case  You should follow Kelly s suggestion  just remove the old script tag  just to keep the DOM slim  it won t affect the outcome  and reinsert a new script tag with the same src  plus a cachebuster

User · Answer

Small tweak to Luke s answer    function reloadJs src        src      script src       src         attr  src           script src       src         remove            lt script  gt    attr  src   src  appendTo  head        and call it like    reloadJs  myFile js      This will not have any path related issues

User · Answer

Here s a method which is similar to Kelly s but will remove any pre-existing script with the same source  and uses jQuery     lt script gt      function reload js src               script src      src         remove                lt script gt    attr  src   src  appendTo  head              reload js  source file js     lt  script gt    Note that the  type  attribute is no longer needed for scripts as of HTML5   http   www w3 org html wg drafts html master scripting-1 html the-script-element

User · Answer

I know that is to late  but I want to share my answer  What I did it s save de script s tags in a HTML file  locking up the scripts on my Index file in a div with an id  something like this    lt div id  ScriptsReload  gt  lt script src  js script js  gt  lt  script gt  lt  div gt    and when I wanted to refresh I just used       ScriptsReload   load  html with scripts tags html       function      response      status      request

[javascript] How to force a script reload and re-execute?

Examples related to javascript

Examples related to html

Examples related to feed

Examples related to script-tag