Discussion :

[surfeur22]

Bonsoir,

J'ai crée une sorte de mini chat entre 2 personnes, les informations sont stockées dans une base mysql.

Ma page ce compose ainsi : une div ou sont affiché les messages :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	echo "<div id='sblock2-1' class='col-md-12' style='border:1px solid white; padding-top:10px'>"; 
 
						while ($donnees2 = $reponse2->fetch())
						{		
							//if ($donnees2['quiEnv'] == '$sessUser'){
								echo "<p><span style='color:blue'>" . $donnees2['date'] . "</span>" . $donnees2['message'] . "</p>";
							//}
							//else {
								//echo "<p><span style='color:blue'>" . $donnees2['message'] . "</span></p>";
							//}
						}	
 
						echo "</div>";

et en dessous une textarea et un bouton envoyer, le code s'exécute sur la seul page en cours.

Tout fonctionne bien, sauf que si l'autre personne envoie un message, il faut rafraichir la page pour le voir dans la div.

Comment pouvoir rafraichir la div et son contenu toutes les 1,2 secondes sans devoir rafraichir toute la page.

merci d'avance !

[Toufik83]

Bonjour,

Comment pouvoir rafraichir la div et son contenu toutes les 1,2 secondes sans devoir rafraichir toute la page.

Il faut utiliser une requête ajax avec l'objet XMLHttpRequest , ou bien les Socket.io et Nodejs.

[surfeur22]

Bonjour,

Avec Jquery J'ai réussi à rafraichir la div après 2 secondes du chargement de la page et ensuite toutes les 2 secondes la div est rafraichie.

les données de la base sont régulièrement mise à jour dans la div, cela fonctionne !.

Code javascript :

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

1
2
3
4
5
6
7
$(function(){
 
setInterval(function(){
$("#maDiv").load(location.href + " #maDiv");
}, 2000);
 
});

Mon seul problème maintenant c'est lorsqu' il y a trop d'informations l

Quand la div est sélectionner le scrool n'arrive pas à descendre pour voir les nouvelles informations :

Code html :

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

<div id="maDiv" style="border : 1px solid red; width:300px; height:100px; overflow:scroll; overflow-x:hidden; overflow-y:visible; height:500px;">

[Toufik83]

Bonjour,

Si les informations sont récupérées depuis le résultat d'une requête mysql , tu peux utiliser un order by pour les afficher en ordre descendant.