[AJAX] Actualisation d'un tchat

Salut,

Je rencontre un problème avec l'actualisation de mon mini-tchat.

Voici comment le système est fait. J'ai une fonction nommé showMiniTchat() qui se trouve dans le fichier functions.php

J'appelle cette fonction depuis l'index.

Voici le contenu de ma fonction :

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
function showMiniTchat(){
    global $bdd;
 
    $chat=$bdd->query('SELECT * FROM tchat WHERE canal = "1" ORDER BY ID DESC LIMIT 0,20');
    $message=$chat->fetchAll();
    $nb=$chat->rowCount();
    if (($_SESSION['grade'] == "2") OR ($_SESSION['grade'] == "4") OR($_SESSION['grade'] == "7")){
        if (isset($_POST['message'])){
            if (!empty($_POST['message'])){
                $id = $_SESSION['id'];
                $pseudo = $_SESSION['personnage'];
                $couleur = $_SESSION['grade'];
                $message = $_POST['message'];
 
                $insert=$bdd->exec("INSERT INTO tchat(id_j,pseudo,couleur, message, canal, date) VALUES( '$id', '$pseudo', '$couleur', '$message', '1', '".time()."')");
            }
        }
        echo '
        <div class="tchat-modo">
        <script type="text/javascript" src="js/tchat.js"></script>
            <input type="checkbox" />
            <label data-expanded="Réduire le tchat  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;×" data-collapsed="Ouvrir le tchat"></label>
        <div class="chat tchat-modo-content">
            <div style="height: 180px; overflow: auto;">';
            echo'   </div>
                <input name="message" id="message" style=" width: 100%;" type="text" maxlength="500"/>
            </div>
        </div>';
    }
}

Voici maintenant le contenu de tchat.js

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
function getXMLHttpRequest() {
    var xhr = null;
 
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
 
    return xhr;
}
 
 
function rafraichir(){
  var xhr = getXMLHttpRequest();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){
      document.getElementById('chat').innerHTML = xhr.responseText;
    }
  };
 
xhr.open("GET", "Modeles/minitchat.php", true);
xhr.send(null);
}
 
function submitChat(){
var xhr = getXMLHttpRequest();
var message = encodeURIComponent(document.getElementById('message').value);
document.getElementById('message').value = "";
 
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById('chat').innerHTML = xhr.responseText;
        }
};
 
xhr.open("POST", "Modeles/minichat.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("message="+message);
 
}
var timer=setInterval("rafraichir()", 5000);

Et enfin, le contenu du fichier minitchat.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if (isset($_POST['message'])){
    if (!empty($_POST['message'])){
        $id = $_SESSION['id'];
        $pseudo = $_SESSION['personnage'];
        $couleur = $_SESSION['grade'];
        $message = $_POST['message'];
        $insert=$bdd->exec("INSERT INTO tchat(id_j,pseudo,couleur, message, canal, date) VALUES( '$id', '$pseudo', '$couleur', '$message', '1', '".time()."')");
    }
}
if ($nb == 0){
    echo '<b>Il n\'y a aucun message dans le tchat.</b>';
}
else{
    foreach ($message as $message){
        echo '['.$message['date'].'] <span class="grade'.$message['couleur'].'"><b>'.$message['pseudo'].'</b> : '.$message['message'].'</span> ';
    }
}
?>

Le soucis est le suivant, lorsque j'ouvre le tchat : http://sdz-upload.s3.amazonaws.com/p...e%20Chrome.jpg

Et bien j'ai ça :

http://sdz-upload.s3.amazonaws.com/p...20Chrome_2.jpg

La div est ouverte une première fois avec la page index.php dedans alors, je ne comprend absolument pas... Et quand je clique sur ouvrir le tchat dans sa propre div, c'est vide.

Voici le résultat attendu :

http://sdz-upload.s3.amazonaws.com/p...20Chrome_3.jpg

Le résultat que vous voyez, c'est le résultat lorsque j'enlève la balise <script>

Merci d'avance