[AJAX] Changement en temps réelle ?

**dimebagplan** · 05/05/2009, 00h32

Salut à tous !
Je viens de me lancer avec Ajax grâce à ce lien très bien expliqué http://siddh.developpez.com/articles/ajax/

J'essaie de mettre à jour l'affichage de messages dans ma page en changent uniquement la div qui convient.

figurez vous que j'ai presque réussie ! (je suis presque fier de moi

)

Voila ce que j'ai pour le moment :

- J'écris mon message dans le textArea.
- J'execute ma fonction javascript grace au bouton envoyer
- Je lance le getXhr()
- Je lance la fonction go() <----- (qui va écrire mon message).
- Depuis ma page ajax.php, j'inscrit les données reçues en POST dans ma base de donnée.

Jusque la tout marche, seulement je ne vois pas comment faire pour dans la foulé ajouter mon nouveau message.

sans plus tarder, voici le code.

ma page addMessage.php

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<?php
//====================================================
//  INCLUDES                 
//====================================================
include "include/connection.php";
include "include/mysqlConnect.php";
 
 
 
//====================================================
//  AFFICHAGE DES MESSAGES                
//====================================================
$reponse = mysql_query("SELECT test_comments.message FROM test_comments") or die(mysql_error());
?>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="templates/styles.css"> 
<script type="text/javascript" src="js/ajaxFunction.js"></script>
<title>add comments v1.0</title>
</head>
<body>
 
	<div id="container">
 
		<?php
                        while ($donnees = mysql_fetch_array($reponse) ){
                ?>
		<div id="comment">
			<p><b>Date du texte ici</b><br/>
			<?php echo $donnees['message'] ?></p>
		</div>
		<?php
                        }
                ?>
 
 
		<div id="write">
			<TEXTAREA id='msg' name='msg' cols='40' rows='5' class='writeBox'></TEXTAREA>
 
			<div id="validateBTN">
				<p><input type='button' value='Ajouter' onclick='go()' class='validateBTNClass'/></p>
			</div>
		</div>
 
 
	</div>
 
 
</body>
</html>
 
 
<?php
mysql_close();
?>

Ici voici ma fonction ajaxFunction.js
Je vous épargne getXhr()...

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
 
function go(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
	// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
 
 
		}
	}
	xhr.open("POST","ajax.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	myMSG = document.getElementById('msg');
	xhr.send("msg="+myMSG.value);
}

Et pour finir l'ajout du message dans ma bdd avec la page ajax.php

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
 
<?php
//====================================================
//  INCLUDES                 
//====================================================
include "include/connection.php";
include "include/mysqlConnect.php";
 
 
//====================================================
//  ENVOIE D'UN NOUVEAU MESSAGE A LA BDD               
//====================================================
if (! empty ($_POST["msg"])){
	$message = mysql_real_escape_string($_POST['msg']); 
	mysql_query("INSERT INTO test_comments (message) VALUES ('$message')");
}
?>

J'espère que vous pourrez m'aider !
A bientôt !

**emmanuel.remy** · 05/05/2009, 01h15

Salut,

Ton "ajax.php" peut générer un texte qui sera récupéré en fin de traitement AJAX (dans le "onreadystatechange"); tu peux alors l'inscrire ou bon te semble dans ton DOM côté client.

2 lignes de codes valent mieux qu'un grand discours, tu peux adapter:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function go(){
	var xhr = getXhr();
...	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
//si le message doit être inscrit dans une balise traditionnelle (div, p, span,...)
document.getElementById("tonID").innerHTML=xhr.responseText;			
//si le message doit être inscrit dans une balise input, textarea ... 
//document.getElementById("tonID").value=xhr.responseText;			
		}
	}
...}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
...
if (! empty ($_POST["msg"])){
	$message = mysql_real_escape_string($_POST['msg']); 
	mysql_query("INSERT INTO test_comments (message) VALUES ('$message')");
   echo "Ajout du message reussi";
}
else {
   echo "Pas de donnees !!";
}
?>

Note que tu peux aussi vérifier dans ta fonction go() qu'il y a bien des données dans msg, plutôt que de poster à vide.

ERE

**dimebagplan** · 05/05/2009, 02h18

Salut,

Merci de bien vouloir m'aider !

Alors, si j'ai bien compris après le :

Code :

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

1
2
3
4
5
6
 
if(xhr.readyState == 4 && xhr.status == 200){
//comme l'élément que je souhaite modifier est une div
document.getElementById("comment").innerHTML=xhr.responseText;			
// il s'agit de la div "comment"			
}

Par contre comment faire pour modifier ma balise div justement ?

Parce qu'une fois que j'ai ajouter le texte dans la BDD j'aimerais mettre à jour la balise pour afficher le texte suplémentaire.

En gros il faudrait que je relance cette ligne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
while ($donnees = mysql_fetch_array($reponse) ){
?>
   <div id="comment">
      <p><b>Date du texte ici</b><br/>
      <?php echo $donnees['message'] ?></p>
   </div>
<?php
}
?>

Ce bout de code est identique à ma page addMessage.php
En gros, une fois le message envoyé, si je fais F5, mon nouveau message apparait.

Je crois que je n'ai pas bien saisie la relation entre le

document.getElementById("comment").innerHTML=xhr.responseText;
et comment modifier ma div dans ajax.php

Merci pour l'aide en tout cas !

@++

**emmanuel.remy** · 05/05/2009, 09h51

Salut,

Quelques précisions. D'abord ton code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
while ($donnees = mysql_fetch_array($reponse) ){
?>
   <div id="comment">
      <p><b>Date du texte ici</b><br/>
      <?php echo $donnees['message'] ?></p>
   </div>
<?php
}
?>

il faut le modifier car tu crées ici n balises avec l'id="comment".

Ensuite, si tu souhaites AJOUTER le message au retour de la fonction AJAX, il ne faut pas utiliser innerHTML car il REMPLACE le contenu de la balise. Par contre tu peux AJOUTER ton message à ceux existants en insérant une série de balises.

Je te propose de modifier ainsi ton code: l'idée est de créer une "section" qui contient une zone pour la date et une zone pour le message; puis de dupliquer cette section et la modifier quand tu souhaites AJOUTER ton message.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="comment">
<?php
while ($donnees = mysql_fetch_array($reponse) ){
?>
   <div style="margin-bottom:10px">
         <span style="font-weight:bold">Date du texte ici</span><br/>
         <span><?php echo $donnees['message'] ?></span>
   </div>
<?php
}
</div>
?>

La structure est celle-ci:

Code :

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

1
2
3
4
- DIV comment
    - DIV pour un message (c'est la section, donc apparaitra N fois)
       - SPAN (indice 0 comme enfant de la DIV) pour la date
       - SPAN (indice 1) pour le texte

Pas besoin de paragraphe, tu peux jouer sur les marges et autres styles

Au retour de la fonction AJAX on demande l'ajout du message:

Code :

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

1
2
3
if(xhr.readyState == 4 && xhr.status == 200){
ajouterMessage(xhr.responseText);			
}

Et donc le code de la fonction ajouterMessage:

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
 
function ajouterMessage(msg) {
   var span = null;
   var comment = document.getElementById("comment");
   //on récupère la "section" qui est la première DIV enfant
   section = comment.getElementsByTagName("DIV")[0];
 
   //on clone (=duplique) la section
   //attention elle n'est pas encore présente dans la page HTML  
   newDivComment = section.cloneNode(true);
   //on cible la zone de la date (span indice 0)
   span =newDivComment.getElementsByTagName("SPAN")[0];
   var d = new Date(); //la date qu'on souhaite inscrire
   //on inscrit la date
   span.innerHTML =d.toLocaleString();
   //on cible la zone du message (span indice 1)
   span =newDivComment.getElementsByTagName("SPAN")[1];
   //on inscrit le message
   span.innerHTML= msg ;
 
   //on ajoute la nouvelle section aux autres: elle est maintenant dans la page
   comment.appendChild(newDivComment);
}

Voilà, je te mets un bout de code autonome si tu veux tester le résultat:

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
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
   function add(msg, date) {
    var comment = document.getElementById("comment");
 
    premierDiv = comment.getElementsByTagName("DIV")[0];
 
    //on clone la section du message
    newDivComment = premierDiv.cloneNode(true);
 
    //on cible la zone de la date
    span =newDivComment.getElementsByTagName("SPAN")[0];
    span.innerHTML =date.toLocaleString()();
    //on cible la zone du message
    span =newDivComment.getElementsByTagName("SPAN")[1];
    //on inscrit le message
    span.innerHTML= msg ;
 
    //on ajoute la nouvelle section aux autres
    comment.appendChild(newDivComment);
 
  }
 
    </script>
 
  </head>
  <body>
<div id="comment">
   <div style="margin-bottom:10px">
      <span style="font-weight:bold">Date du texte ici</span><br/>
      <span>Message 1 </span>
   </div>
 
   <div style="margin-bottom:10px">
      <span style="font-weight:bold">Date du texte ici</span><br/>
      <span>Message 2 </span>
   </div>
   <div style="margin-bottom:10px">
      <span style="font-weight:bold">Date du texte ici</span><br/>
      <span>Message 3 </span>
   </div>
</div>
  <button onclick="add('Nouveau message !', new Date())">Add</button>
  </body>
</html>

A toi de jouer tu auras certainement quelques ajustements à réaliser

,

ERE

**dimebagplan** · 06/05/2009, 21h13

merci emmanuel.remy !!

Je vais décortiquer tout ça et essayer de comprendre le mécanisme.
J'ai vraiment de quoi faire avec l'exemple que tu m'a donné.

En plus c'est très bien commenté et expliqué, c'est vraiment simpas.

Je te tiens au courant !
@+ !

**emmanuel.remy** · 06/05/2009, 23h14

Bon courage, normalement tu as toutes les cartes en main !

ERE

**dimebagplan** · 06/05/2009, 23h50

J'ai tout compris !
J'ai réussi à transposer sur mon application avec succès !

pour être sûr que j'ai bien compris :

getElementsByTagName("DIV")[0];
ici, on cible les enfants d'une balise, pour ajouter, modifier suppr du contenu, un peu à la manière des noeuds en xml, vrai ?

cloneNode(true);
Avec ça on clone le noeud souhaiter (sans pour autant le rendre visible).
vrai ?

innerHTML
permet de modifier textuellement des données.
vrai ?

appendChild(element);
permet d'ajouter l'enfant désiré, un peu comme le addChild (en As3 Flash)
vrai ?

Bon ben sinon c'est super, tu m'a aider à faire mes premiers pas avec Ajax.
j'attends ta réponse histoire de clôturer ce post avec succès !

@+ et merci encore !

ps:C'est drôle quand je parle on dirai que j'ai accompli un miracle hehe...

**emmanuel.remy** · 07/05/2009, 00h11

Envoyé par dimebagplan

J'ai tout compris !
J'ai réussi à transposer sur mon application avec succès !

Félicitations !

pour être sûr que j'ai bien compris :
getElementsByTagName("DIV")[0];
ici, on cible les enfants d'une balise, pour ajouter, modifier suppr du contenu, un peu à la manière des noeuds en xml, vrai ?

on cible les éléments DIV enfants et dans la collection retournée, on prend le premier

cloneNode(true);
Avec ça on clone le noeud souhaiter (sans pour autant le rendre visible).
vrai ?

vrai. Pour être très précis, il est dupliqué en mémoire sans être accroché au DOM de la page, donc n'apparait pas dedans.

innerHTML
permet de modifier textuellement des données.
vrai ?

vrai

appendChild(element);
permet d'ajouter l'enfant désiré, un peu comme le addChild (en As3 Flash)
vrai ?

vrai

Très content que tu aies réussi.

Juste pour la bonne bouche (je n'ai pas voulu t'ennuyer avec ce cas de figure) tu as aussi le cas où la boucle while

Code :

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

1
2
3
while ($donnees = mysql_fetch_array($reponse) ){
..
}

n'est pas parcourue (car pas de données). Dans ce cas il n'existe pas de section à dupliquer... et tout tombe à l'eau lors d'un ajout. Donc pour éviter cet écueil l'idée est de mettre une section cachée qui fera office de "template" et qui sera celle toujours dupliquée, données ou pas. Cela te donne:

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
<div id="comment">
   <div style="margin-bottom:10px; display:none">
         <span style="font-weight:bold">Date du texte ici</span><br/>
         <span>Le message</span>
   </div>

<?php
while ($donnees = mysql_fetch_array($reponse) ){
?>
   <div style="margin-bottom:10px">
         <span style="font-weight:bold">Date du texte ici</span><br/>
         <span><?php echo $donnees['message'] ?></span>
   </div>
<?php
}
</div>
?>

La duplication va se faire de la même manière à cela près qu'il va falloir modifier le style "display='none'" si on veut voir la section après le
appendChild:

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
function ajouterMessage(msg) {
   var span = null;
   var comment = document.getElementById("comment");
   //on récupère la "section" qui est la première DIV enfant
   section = comment.getElementsByTagName("DIV")[0];
 
   //on clone (=duplique) la section
   //attention elle n'est pas encore présente dans la page HTML  
   newDivComment = section.cloneNode(true);
   //on cible la zone de la date (span indice 0)
   span =newDivComment.getElementsByTagName("SPAN")[0];
   var d = new Date(); //la date qu'on souhaite inscrire
   //on inscrit la date
   span.innerHTML =d.toLocaleString();
   //on cible la zone du message (span indice 1)
   span =newDivComment.getElementsByTagName("SPAN")[1];
   //on inscrit le message
   span.innerHTML= msg ;
 
   //on modifie le style pour montrer la section
   newDivComment.style.display="block";

   //on ajoute la nouvelle section aux autres: elle est maintenant dans la page
   comment.appendChild(newDivComment);
}

Et là tous les cas sont parés, qu'il y aie ou pas des données initialement !

ERE

**dimebagplan** · 07/05/2009, 03h00

Juste pour la bonne bouche (je n'ai pas voulu t'ennuyer avec ce cas de figure) tu as aussi le cas où la boucle while n'est pas parcourue (car pas de données). Dans ce cas il n'existe pas de section à dupliquer... et tout tombe à l'eau lors d'un ajout.

Tiens j'étais justement confronté au problème !
tu dois lire dans mes pensées !

Bon ben la, j'ai tout ce qu'il faut !
merci encore @+

**emmanuel.remy** · 07/05/2009, 03h12

Bon courage pour la suite !

ERE

[AJAX] Changement en temps réelle ?

AJAX

Discussions similaires

Partager

Partager