Rerun js when div is reloaded

Question

How do I re-run the js file when the div reloads?

In the head, I have this script:

<script type="text/javascript">  
  var auto_refresh = setTimeout(  
  function ()  
  {  
    $('#scoreboard').fadeIn("slow");  
  }, 3000); // refresh every 10000 milliseconds  
</script>

In the body, I have this div and js file:

<div id="scoreboard">  
  <script language="javascript" 
src="http://www.sportsnetwork.com/aspdata/clients/cbaskscoreboard.aspx?team=B87">
</script>  
</div>

I want to rerun the javascript file on a timed interval. Can it be done?

What do you mean by "div that reloads?" What do you mean by "rerun the js file?" Show some code. — Matt Ball, Nov 22 '11 at 01:18

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

How to re-run a javascript file:

Use JQuery:

$.getScript("my_javascript.js", function(){

   alert("Script loaded and executed.");
   // Here you can use anything you defined in the loaded script
});

For more details how this works: How do I include a JavaScript file in another JavaScript file?

edited May 23 '17 at 11:54

Community

1
1

answered Oct 21 '14 at 15:13

Eric Leschinski

146,994
96
417
335

score 1 · Answer 2 · answered Nov 22 '11 at 01:52

This is the wrong way to do this.

You should include a script file once, in your <head> or at the bottom of your <body>. That script file should define a function that you will be able to call. Now you can call this function directly from your setTimeout.

Say the JS file has this:

var sayHello = function() {
  alert('Hello!');
};

Now include that file like this:

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

And now change your timeout code to this:

var auto_refresh = setTimeout(function() {  
  $('#scoreboard').fadeIn("slow");
  sayHello();
}, 3000);

It's a good practice to never have the inclusion of a javascript file "do" stuff, because as you discovered it's then hard to make it do that stuff again. Instead it should define functions or objects that can be called upon to do stuff as many times as you like.

Ok, that all makes sense. But the part I'm having trouble with is the script that goes in the head. The src I get is from a 3rd party and just spits out a document.write(). So running the sayHello(); in the timeout code doesn't work. — Billy Steffens, Nov 22 '11 at 02:10
Same problem, but this time from Disqus. The comment count in Disqus is only ran once (as far as I can see). So when I want new comment counts, I need to rerun that script. Hence reloading the script tag. — CMCDragonkai, Aug 05 '13 at 00:18

Brett Pontarelli · Answer 3 · 2011-11-22T20:38:18.610

I would agree with Squeegy that you best solution is to call a function, but if you are not the author of the included script and must find a solution I would suggest a few things:

[EDIT Nov 22 12:27pm]
Now that I better understand that the page you are trying to pull from is a script that returns document.write I think there are 2 options. I've inserted them here with some details and left my original post below for posterity.

Option 1:

Create a page that is on your domain that includes the script. For example, it could be called www.yourdomain.com/sportsnetwork/B87/.
In the setInterval function build an iframe with that as it's source and inject then into your scoreboard <div>.

Option 2:

Create a page that is on your domain that will parse the sportsnetwork.com page, remove the document.write and pass back html.
In the setIntercal function make an ajax request to get the html and insert that into your scoreboard <div>.

Original Option that will not work with document.write:

var auto_refresh = setInterval(  
  function () {  
    $('#scoreboard').fadeIn("slow");
    var unique = Date.now();
    var scriptFile = document.createElement('script');
    scriptFile.type = 'text/javascript';
    scriptFile.async = true;
    scriptFile.src = 'http://www.sportsnetwork.com/aspdata/clients/sportsnetwork/pullouts/logoscores/cbaskscoreboard.aspx?team=B87&unique=' + unique;
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(scriptFile, s);
  }, 3000);

This will add a new script to the page every 3 seconds and the browser will think think it is a different script due to the unique tag. I think you might need to rework the timing of the fade in relation to the reloading of the script depending on what their relationship is.

Thank you! I think this is the answer, but I don't seem to be getting it to work. Should this code be in the head or in the body? I have it in the head, but it isn't refreshing... — Billy Steffens, Nov 22 '11 at 02:58

Rerun js when div is reloaded

3 Answers3