Auto refresh spécifique div blogueur javascript

J'utilise un widget Javascript sur un blogspot. Il comprend un div avec quelques javascripts qui obtenir des "non-statique" des chaînes à partir d'un serveur et d'impression sur la page. Jusqu'ici tout fonctionne bien, le problème est que je voudrais mettre à jour l'exécution de cette div toutes les quelques secondes pour avoir mis à jour les chaînes, sans rafraichissement de la page entière, mais juste le widget spécifique (div). J'ai ajouté un autre script qui tente d'actualiser spécifiques div, mais je n'avais pas de chance. Veuillez voir le code ci-dessous

<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 de mise à jour:

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

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

En outre quelque chose comme cela pourrait être utilisé, mais cette méthode recharger la page entière et non spécifiques div.

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

startTime() est en cours d'exécution, mais document.getElementById('info').innerHTML = document.getElementById('info').innerHTML cela n'a aucun effet. Essayez d'ajouter un console.log("startTime()"); dans startTime et voir si elle fonctionne ou pas.
Merci pour la réponse rapide, oui la fonction startTime() est exécutée correctement, j'ai essayé en remplaçant le code avec quelque chose d'autre et il fonctionne très bien. Le problème est évidemment avec le document.getElementById('info').innerHTML = document.getElementById('info').innerHTML; code qui est faux.
Vous avez besoin du code pour obtenir le texte à partir du serveur, puis. Regarder en jQuery et $.get().
Désolé de ne pas avoir ma question claire. Je reçois le texte à partir du serveur, et il apparaît sur l'écran correctement. Mon problème est que je voudrais mettre à jour cette opération toutes les 5 sec.
"le texte à partir du serveur" avec le javascript?

OriginalL'auteur Doctor_E | 2013-05-19

Dernière Mise À Jour

J'ai essayer avec l'Ajax et avec créé élément.
Avec cette technique, la charge de l'contient des scripts mais le document.write() de ne pas fonctionner.
Parce que ce write() besoin de la refresh page()!!

Juste de retour d'une valeur à partir d'une fonction ne permet pas de placer cette valeur dans un élément HTML en aucune façon. On pourrait utiliser document.write (non recommandé), ou d'accéder à l'élément par son id et écrire l'élément souhaité contenu via .innerHTML=…

Expliquer.

Si vous sera afficher sur la page, créez d'abord un élément avec un id "message" (vous pouvez écrire ce que vous voulez, mais n'oubliez pas, l'id doit être unique dans la page) comme

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

et ensuite utiliser

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

ou si vous utilisez jQuery:

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

ou si vous utilisez une console est activé sur votre navigateur (Firefox, Chrome etc)

console.log("New title");

au lieu de

document.write("New title");

PUIS document.write seulement pour le temps de chargement d'une page.

Vous avez à changer les scripts et les remplacer document.write()

J'ai mis mon code avec createElement et sur le commentaire de regarder le monde, mon travail.

<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>

Mise à JOUR:

ALORS....

- Je modifier votre site et maintenant de la fonction!!!
Et sur mon pc ce site est refresh toutes les 5 secondes!!!
Vous avez toujours les deux erreurs.

Ce travail pour vous, mais vous avez l'erreur.
Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". sur la phrase n° 13 et aussi pour la phrase n°18.

http://xxxx

Cette erreur que j'ai trouver avec l'outil de google chrome (Inspecter l'élément).

La solution est sur Stackoverflow ou prefier la blog.

J'ai le logiciel est Kubuntu (KDE + Ubuntu) et je ne sais pas pour modifier la valeur de 'registre.

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>

Ou autre 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>

C'est un vieux site, mais pas à actualiser le 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>

Je viens de trouver un moyen de recharger juste un morceau de code, plutôt que de recharger la page entière. En outre, c'est un blogspot JS widget, j'ai beaucoup de restrictions en utilisant d'autres choses que JS
Chanson: Inconnu - 70 s 8o s 90 s MEGAMIX Classique, 1 par Nicolas Escobar Auditeurs: 0 État du Serveur: <img> Ce, imprimer sur le site toutes les 5 seconde, toujours (sur mon pc)
Merci pour l'aide, mais ce n'est pas de travail. <head> n'est pas permis dans un blogueur widget Javascript, j'ai essayé d'ajouter le code dans le template <head> mais pas de chance. Je voudrais vous informer que je n'ai pas accès au serveur de donner l'info. Vous l'avez dit, vous avez toujours la même chaîne sur votre pc, c'est ça le problème, le serveur de changer la chaîne après un certain temps, si vous appuyez sur actualiser maintenant, il y aurait des différentes chaînes. C'est mon point de "actualisation automatique" ce widget spécifique.
Maintenant, je comprends votre cas et votre travail avec certains de radio?
Oui, c'est exact, Mirko. Je l'hôte de la radio sur la page de blogspot, et la collecte d'informations à partir du serveur shoutcast concernant le titre de la chanson, auditeur, etc... Cependant, blogspot, a trop de restrictions concernant la mise en œuvre du code pour les widgets. Je ne veux pas de rafraîchir la page entière, à cause de la radio streaming sera actualisé trop, de sorte que l'auditeur entendra les lacunes toutes les 5 sec.

OriginalL'auteur Mirko Cianfarani

2

ici est un violon exemple de la façon général, je déclarer mon jeu de fonctions d'intervalle...

ce que l'on est à l'intérieur html de mon #info div à un horodatage seulement si u peut voir qu'il est fonctionnel.

violon ici avec l'intervalle réglé
mais je pense qu'il y a une autre faille dans ce processus...

on dirait ici que vous mettez à jour le contenu de la div pour exactement le même code html comme ils étaient avant:
```
    document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;   
```
c'est probablement votre problème, les scripts externes que vous utilisez sont susceptibles d'écriture html, et vous êtes tout simplement la copie plutôt que l'exécution de ces scripts de nouveau. ce que vous voulez faire est de lancer une sorte d'appel AJAX à nouveau exécuter ces scripts.

vous pouvez le faire plus facilement avec la bibliothèque jquery si vous êtes intéressé à aller dans cette voie. ou de maintenir la stricte javascript que je vous recommande de commencer ici:

w3 ajax tutorial

C'est un blogspot JS widget, j'ai beaucoup de restrictions en utilisant d'autres choses que JS
je voudrais commencer avec w3 ajax tutorial alors, strictement javascript comme je l'ai dit pas de bibliothèques supplémentaires
Je vous remercie pour votre aide, mais le point est de ne pas apprendre quelques commandes Javascript ou de la syntaxe (en plus j'étais conscient que l'-dessus de la ligne de code n'est pas correct, c'est pourquoi je poste, afin d'exprimer l'objet de la recherche). Le point est de déterminer si il y a une capacité de rechargement d'une partie spécifique du code via Javascript sur un blogspot widget (ou au moins l'ensemble du widget) toutes les quelques secondes.

OriginalL'auteur Joe

Vous devez vous connecter pour publier un commentaire.