Refresh a DIV every 5 mins

JavaScript
1

Hello,
I have found many ways to do the timing with setInterval and some ways of refreshing the DIV with refreshDiv

What I am trying to do is have a Div refresh every 5 min. If changes are made to the Div, the page will show it. I can not do a full page reload because i have a media player on the page and if the payer is active, I do not want it to be effected.

Here is my code. Where the ? is, is where I am lost.

<script langauge="javascript">

            window.setInterval("refreshDiv()", 5000);
            function refreshDiv()
{
                counter = counter + 1;
                document.getElementById("streamTitle").innerHTML = ?       ;
            }
        </script>
<div id="streamTitle">Testing </div>

I know the HTML, Head< and Body tags are not there.

2

There was some items of the code that should not been included.
Here is what should have been there.

<script langauge=“javascript”>

        window.setInterval("refreshDiv()", 300000);  
        function refreshDiv()

{
document.getElementById(“streamTitle”).innerHTML = ? ;
}
</script>
<div id=“streamTitle”>Testing </div>

3

Hi there.

Here is some amended code with notes:


<script> 
function refreshDiv() { //make sure braces are on the same line as the block statement, it's a good convention in JS

    document.getElementById("streamTitle").innerHTML = "Some <strong>HTML</strong> <em>string</em>" ; 

} 

window.setInterval(refreshDiv, 300000); //place reference to refreshDiv (not a string)
</script>
<div id="streamTitle">Testing </div>

Of course if you were increasing a counter you could put the value of that in the innerHTML string as well.

PS. “language” on your script tag is misspelled, it’s fine though, most browsers will ignore it anyway :wink:

4

Thanks Aussie John.

I am thinking I may not be clear on what I want to do. There may be a different way.

I have a page that has a Livestream player on it. I put a caption above it stating what is being streamed.
many times we stream events one right after another.

I want to do the following, when an event is over I change the caption. I want it to be replaced without reloading the page.

Your code works, but it does not pull the changed text in the Div.

5

I can’t say I’ve used LiveStream before but I did a quick google and they do have an API that you might be able to hook into to figure out when the next event starts playing. That might make switching the caption at the right time easier.

If the code I posted doesn’t work, there might be some other JavaScript errors on the page. It would be worth checking out the JavaScript console to check for errors (CTRL+SHIFT+J in Chrome on Windows).

Also where are you expecting to get the updated text from? (Is there some variable that’s being set somewhere?)

6

I will have to look at what my options are with the API, but I am thinking we would have to stop the stream to change the text.

My hope is that the Div would reload from the web server. Any new text with in that Div would be displayed in place of the original code.

By the way, your code worked just as you had it written. After a time period, it changed the text.

7

Ah right, I think I understand what you mean now :slight_smile:

This isn’t something that would be possible in the way that you described, simply “doing something” to a div won’t be able to get the updated version from the server.

However, we can use AJAX to make a request to the server to do this. In this case it would be best if your back-end developer (or yourself of course) would add a little script that would return the title/caption of the current stream.

If this is not an option then we can still make this work, we’ll just have a slightly higher overhead.

Firstly, I’ll recommend that we use the jQuery library for this as it will save a lot of hassle in the long run.

To include it, if it isn’t already, place this before you reference/use it:


    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

First use case: We have a separate script that can give us the title and caption:


function updateContent() {
    $.get("someScript.php", function(data) { 
        $("#streamTitle").html( data ); // assuming the only string returned is the title
    });
}

setInterval(updateContent, 300000);

If this is not an option for you, but you know the current page when retrieved from the server will have the correct title in side the #streamTitle div, we can do it the following way:


/* 
  we need to use an element inside streamTitle as the entire element is returned (otherwise you'd end up nesting #streamTitle)
  Let's imagine we had the following HTML:
  <h1 id="streamTitle"><span id="streamTitleCaption">Hello</span></h1>
*/

function updateContent() {
    $("#streamTitle").load("currentpageName.php #streamTitleCaption"); 
}
setInterval(updateContent, 300000);
8

Thanks Assie John,
I will work with your recomendation