Ajax refresh d'une div

Version imprimable

J'essaye qu'une div se se rafraichisse toute les X secondes mais j'y arrive vraiment vraiment pas. J'ai chercher sur les forum mais je n'arrive jamais a adapter les scripts dans je viens chercher de l'aide.

C'est en fait une page avec deux div.

voila le code de ma page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="XHRConnection.js"></script>
 
<script type="text/javascript">
 
function remplirChamp1(obj) 
{
	document.getElementById('envoyer').innerHTML = obj.responseText;
}
 
 
function sendData1()
{
	var XHR = new XHRConnection();
	XHR.appendData('Pseudo', document.getElementsByName('Pseudo')[0].value);
	XHR.appendData('Message', document.getElementsByName('Message')[0].value);
	XHR.sendAndLoad('sendforum.php', 'POST', remplirChamp1);
}
 
</script>

Voila la premiere div:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Div>
 
<form name="formPost" method="post">
 
Pseudo :<br>
<input type="text" name="Pseudo" size=15 maxLength="25" /><br>
 
Message :<br>
<textarea type="text" name="Message" cols=60 rows=2></textarea><br>
 
<img src="ok.gif" onclick="document.forms[0].reset()" />
 
<img src="image/ok.gif" onclick="sendData1()" />
 
</form>
 
</Div>

Et voila ma deusieme div, celle que je voudrais raffraichir toute les X secondes:

Code:

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
<Div id="envoyer">
 
<?php
 
mysql_connect("localhost", "root", "");
mysql_select_db("bdd");
 
$reponse = mysql_query("SELECT DATE_FORMAT(date,'le %d-%m-%Y &agrave; %H:%i') AS Date, Pseudo, Message FROM forum ORDER BY id DESC limit 0,10");
 
while ($donnees = mysql_fetch_array($reponse) )
{
?>
 
<table><tr><td>
 
<?php echo $donnees['Date']; ?><br>
<?php echo $donnees['Pseudo']; ?><br>
<?php echo $donnees['Message']; ?><br>
 
</td></tr></table>
 
<?php
}
mysql_close();
?>
 
</Div>

Ce code marche parfaitement mais la div ne se raffraichi que quand j'envoie un message. J'ai essayer avec un setTimeout mais j'y suis pas arriver.

Quelqu'un peut-il m'aider svp ?

28/03/2008, 16h57
marts

Comment as tu fait avec setTimeout ? Est ce que tu appelles sendData1 toutes les x secondes ?
29/03/2008, 13h40
lelapinrusse

Oui voila, comme senddata1 envoie a une page php et que cette page test si les champs sont vides ou pas, il n'y avait pas de probleme à appeler cette fonction.

donc j'avais ca:

<script>
fonction refresh()
senddata1();
SetTimeout("refresh()", 5000);
</script>

et dans la page j'avais:

<script>
refresh();
</script>

Mais je dois mal m'y prendre parce que ca ne marche pas...
Il y a une maniere plus simple en creans une autre fonction ?

setTimeout ne fait que différer l'exécution d'une fonction mais ne la répète pas. Il faut que la fonction se rappelle elle même pour perpétuer le rafraichissement :
Code:

1 2 3 setTimeout(refresh,5000); // lance la fonction une première fois ... function refresh() {sendData1();setTimeout(refresh,5000);} // ... puis la fonction se rappelle elle-même au bout de 5 secondes
Fais attention, ton code est bourré d'erreurs :
- 'function' et non 'fonction'
- accolades autour du corps de la fonction refresh
- 'setTimeout' et non 'SetTimeout'

29/03/2008, 16h07
lelapinrusse

Merci beaucoup, cela fonctionne. C'est sur que si je lance pas la fonction, elle se lancera pas toute seule.

J'ai encore un probleme, relancant la fonction senddata1,si quelqu'un est en train d'ecrire, ca va partir.

Pour bien faire il faudrait faire un fonction afficher qui n'envoie rien.

Tu pourrais m'aider stp?
29/03/2008, 16h32
marts

Rien de plus simple. Tu fais une fonction identique à sendData1 mais qui laisse pseudo et message vide (au lieu de les prendre dans les champs du formulaire).
29/03/2008, 20h58
lelapinrusse

J'ai donc ajouter ca sur ma page

function afficher()
{
var XHR = new XHRConnection();
XHR.appendData('Pseudo', document.getElementsByName('Pseudo')[0].value='');
XHR.appendData('Message', document.getElementsByName('Message')[0].value='');
XHR.sendAndLoad('sendforum.php', 'POST', remplirChamp1);
}

setTimeout(refresh,5000);
function refresh()
{
afficher();
setTimeout(refresh,5000);
}

</script>

Bonne nouvelle, le code que tu m'as donne fonctionne parfaitement puisque le refresh se fait.

Probleme, la div avec le formulaire se refresh aussi alors que le formulaire n'est pas dans la div id="envoyer"
Resultat, plus possible d'ecrire puisque toute les 5 secondes les champs se vides...

Code:

1
2
3
4
5
6
7
8
 
function afficher()
{
var XHR = new XHRConnection();
XHR.appendData('Pseudo','');
XHR.appendData('Message','');
XHR.sendAndLoad('sendforum.php', 'POST', remplirChamp1);
}

29/03/2008, 22h15
lelapinrusse

Se fut un peu difficile,

merci beaucoup pour ta patience !