Auto refresh a specific div blogger javascript

Question

I use a Javascript widget on a blogspot. It include a div with some javascripts that get some "non-statical" strings from a server and print them on the page. Until here everything works fine, the problem is that I would like to update the execution of this div every few seconds in order to have updated strings, without refreshing the whole page, but just the specific widget (div). I have added another script that tries to refresh the specific div, but I had no luck. Please see the code below

<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>

Script for refreshing:

  <script type="text/javascript">
    window.onload = startInterval;
    function startInterval()
    {
        setInterval("startTime();",5000);
    }

    function startTime()
    {
        document.getElementById('info').innerHTML = ??? // reload div    
    }
  </script>

Additionally something like this could be used, but this method reload the whole page and not the specific div.

<script>
setInterval(function() {
    parent.location.reload(true);
}, 5000); 
</script>

`startTime()` is executing, but `document.getElementById('info').innerHTML = document.getElementById('info').innerHTML` this doesn't have any effect. Try adding a `console.log("startTime()");` in startTime and see if it is running or not. — Tasos Bitsios, May 19 '13 at 01:26
Thanks for the quick reply, yes the function startTime() is executed correctly, I have tried by replacing the code with something else and it works fine. The problem is obviously with the document.getElementById('info').innerHTML = document.getElementById('info').innerHTML; code which is wrong. — Doctor_E, May 19 '13 at 01:30
You need code to get the text from the server, then. Look into jQuery and $.get(). — Tasos Bitsios, May 19 '13 at 01:32
Sorry for not making my question clear. I get the text from the server and it appears on the screen correctly. My problem is that I would like to update this operation every 5 sec. — Doctor_E, May 19 '13 at 01:36
Yes Tasos, it is not exactly a server, a webpage that just returns a script. But this is not my problem. The problem is how to auto refresh the widget every 5 sec. — Doctor_E, May 19 '13 at 02:02
can you post the full code? you essentially want to call whatever function the widget contains in your setInterval. — Tasos Bitsios, May 19 '13 at 02:04
I have posted the full code. Actually the widget ends where the is. The other is extra code. — Doctor_E, May 19 '13 at 02:11
That's correct Mirko, The div (which is included in the widget) works just fine, but it is not updated over time. That's why I tried adding the code bellow the div. — Doctor_E, May 19 '13 at 02:16

score 5 · Answer 1 · edited May 23 '17 at 12:09

Last Update

I try with Ajax and with created element. With this technique, load the contains of the scripts but the document.write() not function. Because this write() need the refresh page()!!

Just returning a value from a function does not place that value into an HTML element in any way. One could either use document.write (not recommended), or access the element via its id and write the desired element content via .innerHTML=…

Explain.

If you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like

<div id="message"></div>

and then use

document.getElementById("message").innerHTML = "New title";

or if you are using jQuery:

$("#message").html("New title");

or if you are using a console enabled browser (Firefox, Chrome etc.)

console.log("New title");

instead of

document.write("New title");

THEN document.write only for page loading time.

You have to change the scripts and replace document.write()

I put the my code with createElement and on the comment you look the my work.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/song/uk23-free:5106">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/listeners/uk23-free:5106">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="http://shoutcast.mixstream.net/status/uk23-free:5106.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>


      <script type="text/javascript">
      function timedRefresh(timeoutPeriod) {

var myVar=setInterval(function(){myTimer()},timeoutPeriod);

function myTimer()
{

          document.getElementById("info").innerHTML="";
          var b=document.createElement('B');
          b.appendChild( document.createTextNode("Song") );
          document.getElementById("info").appendChild(b);
// span.innerHTML="";
// span.appendChild( document.createTextNode("hello") );
// document.getElementById('myspan').innerHTML = 'newtext';



           var src1 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
                script1 = document.createElement('SCRIPT');
                script1.type="text/javascript";
           script1.src = src1;
           document.getElementById("info").appendChild(script1);

           var br= document.createElement('BR');
           document.getElementById("info").appendChild(br);
           document.getElementById("info").appendChild(br);
           var b=document.createElement('B');
           b.appendChild( document.createTextNode("Listeners") );
           document.getElementById("info").appendChild(b);
           var src2 = 'http://shoutcast.mixstream.net/js/listeners/uk23-free:5106',
                script2 = document.createElement('SCRIPT');
                script2.type="text/javascript";
           script2.src = src2;
           document.getElementById("info").appendChild(script2);

           document.getElementById("info").appendChild(br);

           var b=document.createElement('B');
           b.appendChild( document.createTextNode("Server Status") );
           document.getElementById("info").appendChild(b);

              var src3 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
                script3 = document.createElement('IMG');

           script3.src = src3;
           script3.alt="Stream status";
           script3.width="17";
           script3.height="17";
           script3.align="absmiddle";
           document.getElementById("info").appendChild(script3);
//              
//              document.body.appendChild(script);
//              
//              document.body.info.appendChild(b);
//            document.getElementsByTagName('b')[1].appendChild( document.createTextNode("Listeners") );
//             document.body.info.appendChild(script2);
//            var br= document.createElement('BR');
//            
//            document.body.info.appendChild(br);
}   
//    // create an object of the head element of current page
//   var hdEl = document.getElementsByTagName("song");
// 
//   //check for previously appended child 
//   //(it ensures that each time the button is pressed it
//   // removes the previously loaded script element)
//   if (hdEl.childNodes.length > 1) {
//    hdEl.removeChild(hdEl.lastChild);
//   }
// 
//   // Now add this new element to the head tag
//   
//   
//     //Create a 'script' element  
//   var scrptE = document.createElement("script");
// 
//   // Set it's 'type' attribute   
//   scrptE.setAttribute("type", "text/javascript");
// 
//   // Set it's 'language' attribute
//   scrptE.setAttribute("language", "JavaScript");
// 
//   // Set it's 'src' attribute
//   scrptE.setAttribute("src", "http://shoutcast.mixstream.net/js/song/uk23-free:5106");
// 
//   // Now add this new element to the head tag
//   hdEl.appendChild(scrptE);
// //   document.getElementsByTagName("song").appendChild(scrptE);
//     //This is a old:
//    setTimeout("alert("ojk");",timeoutPeriod);
//     //  This function!!!
//  setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// var oHead = document.getElementsByTagName('HEAD').item(0);
// var oScript= document.createElement("script");
// oScript.type = "text/javascript";
// oScript.src="other.js";
// oHead.appendChild( oScript);

}
  </script>
</body>
</html>

UPDATE:

THEN....

I change your site and now function!!! And on the my pc this site is refresh every 5 second!!! You have always the two particular errors.

This work for you but you have the particular error. Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". on the sentence n° 13 and also for sentence n°18.

http://xxxx

This error I find with the tool's chrome (Inspect element).

The solution is on Stackoverflow or prefier the blog.

I have the software is Kubuntu (KDE + Ubuntu) and I don't know for change the value 's registry.

Solution:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>


      <script type="text/javascript">
   function timedRefresh(timeoutPeriod) {
    //This is a old:
    //setTimeout("location.reload(true);",timeoutPeriod);
    //  This function!!!
setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
}

  </script>
</body>
</html>

Or other solution:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>
<body >
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>


      <script type="text/javascript">
//    function timedRefresh(timeoutPeriod) {
//  setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
//         document.getElementById("info").innerHTML=document.getElementById("info").innerHTML
// }

            window.setInterval("refreshDiv()", 5000);  
            function refreshDiv(){   
                document.getElementById("info").innerHTML = document.getElementById("info").innerHTML;  
            }
  </script>
</body>
</html>

This is a old site but not refresh the site.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>


      <script type="text/javascript">
    setInterval(function(){
     document.getElementById('info').innerHTML = document.getElementById('info').innerHTML; 
}, 5000);

  </script>
</body>
</html>

I just searching for a way to reload just a piece of code, rather than reloading the whole page. Additionally, this is a blogspot JS widget, I have a lot of restrictions using other stuff than JS — Doctor_E, May 19 '13 at 02:14
Song: Unknown - 70 s 8o s 90 s MEGAMIX Classic Project 1 by Nicolas Escobar Listeners: 0 Server Status: This, print on the site every 5 second, always (on the my pc) — Mirko Cianfarani, May 19 '13 at 03:00
Thank you for the help, but this is not working. is not allowed into a blogger Javascript widget, I have tried to add the code into template's but no luck. I would like to inform that I do not have access to the server giving the info. You said you have always the same string on your pc, that's the problem, the server change the string after some times, if you press refresh now, there would be different strings. That's my point to "auto-refresh" this specific widget. — Doctor_E, May 19 '13 at 10:35
NOw I understand the your case and your working with some radio? — Mirko Cianfarani, May 19 '13 at 14:34
Yes, that's correct Mirko. I host the radio page on blogspot and gathering info from the shoutcast server regarding song title, listener etc... However blogspot, has too many restrictions regarding implementing code for widgets. I do not want to refresh the whole page, cause the radio streaming will be refreshed too, so the listener will hear gaps every 5 sec. — Doctor_E, May 19 '13 at 15:29
Try with: function timedRefresh(timeoutPeriod) { setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);} — Mirko Cianfarani, May 19 '13 at 16:12
When this song Unknown - Greek Rock Vol 1 by Petrosk finish? — Mirko Cianfarani, May 19 '13 at 16:32
I wait for the finish Steppenwolf - Born To Be Wild.. I change script — Mirko Cianfarani, May 19 '13 at 16:55
I suggest for you of use the page in php because you can refresh only one page inside the site. — Mirko Cianfarani, May 19 '13 at 17:01
This is the server status page, no need to have any account. Posted here just to observe the song title and listeners in real time — Doctor_E, May 19 '13 at 17:34
sorry for the delay, I worked for an hour every day and I have also the my work. You can use the document.write and you have to change the script. I hope that I get a good reputation from you. — Mirko Cianfarani, May 25 '13 at 10:46

score 2 · Answer 2 · answered May 19 '13 at 01:43

2

here is a fiddle working example of how i typically declare my set interval functions...

this one is setting the inner html of my #info div to a timestamp just so u can see that it is functional.

fiddle here with set interval but i think there is another flaw in this process...

it looks like here you are updating the contents of the div to exactly the same html as they were before:

    document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;

this is likely your issue, the external scripts you are using are likely writing html, and you are just copying it rather than running those scripts again. what you want to do is run some sort of AJAX call to rerun those scripts.

you can do this more easily with the jquery library if you are interested in going that route. or to maintain strict javascript i would reccomend starting here:

w3 ajax tutorial

answered May 19 '13 at 01:43

Joe

2,085
1
18
28

This is a blogspot JS widget, I have a lot of restrictions using other stuff than JS – Doctor_E May 19 '13 at 02:13
i would start with that w3 ajax tutorial then, strictly javascript as i mentioned no additional libraries – Joe May 19 '13 at 02:20
Thank you for your help but the point is not to learn some Javascript commands or syntax (besides I was aware that the above line of code is wrong, that's why I post it, in order to express the subject of research). The the point is to determine if there is the ability of reloading a specific piece of code via Javascript on a blogspot widget (or at least the whole widget) every few seconds. – Doctor_E May 19 '13 at 02:25

Auto refresh a specific div blogger javascript

2 Answers2

Linked