[AJAX] Changement en temps réelle ?
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 :oops: )
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:
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:
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:
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 !
