SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Refresh a DIV every 5 mins

    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.

    Code HTML4Strict:
    <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. #2
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Admum View Post
    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>
    Hi there.

    Here is some amended code with notes:
    Code javascript:
    <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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Admum View Post
    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.
    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?)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Admum View Post
    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.
    Ah right, I think I understand what you mean now

    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:
    Code:
        <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:
    Code javascript:
    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:

    Code javascript:
    /* 
      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);
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Assie John,
    I will work with your recomendation


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •