Discussion :

[Miou76]

Bonjour à tous,

Je suis actuellement en train de créer un lecteur pour ma Web Radio, et je me trouve de devant un problème que je n'arrive malheureusement pas à résoudre...

Tout d'abord, je dois préciser que je n'ai aucune connaissance en JavaScript, et que mes connaissances en PHP sont très minces.


Voici une image du fameux player (au passage, si vous pouviez me donner un avis sur le design... ) :



J'ai préciser en rouge les différents DIV que je dois rafraichir. Tous ne doivent pas être rafraichissement en même temps :

- DIV TITRE, DIV AUDITEURS, DIV VOTES, et DIV POCHETTE Doivent êtres mis à jours en même temps, toutes les 10 secondes.
- DIV WEBCAM doit être rafraichit toutes les 5 secondes.


J'ai donc mis en place un script trouvé sur le net, sensé rafraichir un DIV toute les x secondes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function Ajax(){ 
var xmlHttp; 
    try{     
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari 
    } 
    catch (e){ 
        try{ 
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
        } 
        catch (e){ 
            try{ 
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
            } 
            catch (e){ 
                alert("No AJAX!?"); 
                return false; 
            } 
        } 
    } 
 
 
xmlHttp.onreadystatechange=function(){ 
    if(xmlHttp.readyState==4){ 
        document.getElementById('apDiv5').innerHTML=xmlHttp.responseText; 
        setTimeout('Ajax()',10000); 
    } 
} 
xmlHttp.open("GET","http://3w.lesincompris.org/ressources/aff_titre.php",true); 
xmlHttp.send(null); 
} 
 
window.onload=function(){ 
    setTimeout('Ajax()',10000); 
}

Ce script fonctionne très bien pour un DIV... Mais pas plusieurs. Rien à faire, ça ne fonctionne pas sur plus d'un DIV... J'ai bien essayé de bidouiller ça de toutes les manières, mais rien à faire, ce script est en train de me rendre fous.

En farfouinant sur le net, j'ai lu que pour accomplir cette tache, il fallait un code beaucoup plus complexe.


Enfin bref, je ne sais plus quoi faire. Si l'un de vous à un script dans un coin de son disque dur permettant d'accomplir cette action, ce serait formidable qu'il le partage.


Et bien, un long post pour un premier message sur ce forum!



Bonne soirée à tous, et merci d'avance .





Nicolas C.

[Bovino]

Salut et bienvenue.

En farfouinant sur le net, j'ai lu que pour accomplir cette tache, il fallait un code beaucoup plus complexe.

C'est effectivement le cas.
Ce qu'il faut, c'est organiser le réponse du serveur pour pouvoir effectuer différents traitements en JavaScript (XML, JSON...) puis récupérer les différentes parties pour les injecter dans les div correspondantes.
Ceci dit, je tiens quand même à te préciser que vouloir élaborer des pages avec un peu de complexité avec :

Tout d'abord, je dois préciser que je n'ai aucune connaissance en JavaScript, et que mes connaissances en PHP sont très minces.

N'est certainement pas la bonne démarche

[Miou76]

Merci pour ta réponse,

Je me doutais effectivement que mon manque de connaissance dans le domaines n'est pas une bonne façon de démarrer... Mais malheureusement, sur ce coup, je n'ai pas vraiment le choix...

Aurais tu une idée de l'endroit où je pourrais trouver un script "clef en main"?

Sinon, est ce que rafraichir toute les DIV en même temps simplifierai les choses?


Encore merci,

[emmanuel.remy]

Salut,

Peux tu passer ton code stp ? Car un souci potentiel est le nombre de requêtes AJAX simultanées que tu exécutes.

ERE

[Miou76]

Merci pour ta reponse

Yep, voici le code en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--
window.onload = lesincompris;
window.setInterval('lesincompris()', 8000);
function lesincompris()
{
var xhr;    
if (window.ActiveXObject) 
{
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } 
catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } 
}
else
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
	if(xhr.readyState == 4 && xhr.status == 200)
	{
		document.getElementById("infos").innerHTML = xhr.responseText;
	}
}
xhr.open("GET", "get_infos.php", true);
xhr.send(null);
}
-->

Voilà. Et j'en mettais autant que j'ai de div à rafraichir... Rien ne fonctionnait.

Par contre, je viens a l'instant de tomber sur un article parlant de la librairie "Prototype". Elle propose une fonction Ajax.PeriodicalUpdater qui pourrait peut être faire ce que je souhaites faire.

Qu'en penses tu?


Nicolas C.

[Miou76]

Houra!

Problème réglé grâce à la (formidable) bibliothèque Prototype et sa fonction Ajax.PeriodicalUpdater.

Pour ceux que ça intéresse, voilà à quoi ça ressemble :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script type="text/javascript" src="Scripts/prototype.js"></script>
<script type="text/javascript">
new Ajax.PeriodicalUpdater('cam', 'cam.html', {frequency:20});
new Ajax.PeriodicalUpdater('infos', 'get_infos.php', {frequency:10});
new Ajax.PeriodicalUpdater('cover', 'cover.html', {frequency:15});
</script>

Entre <head> et </head> et youpi, tout roule.


Merci à vous :-)


Nicolas C.