[AJAX] Rafraichissement de tableau avec ajax

**Lini62** · 19/10/2010, 11h37

Bonjour tout le monde,
Bon voila je vous explique mon problème : je suis en train de compléter un site que j'ai fait avec un tchat. Mon tchat par lui même va bien mais c'est le rafraichissement qui pose probleme. Avant comme je m'y connaissais pas en ajax j'avais fait un bouton de rafraichissement mais avec le temps j aimerai le retirer. Du coup, je me suis mise à ajax. Mon code a l'air de marcher mais pas sur mon tableau. C'est à dire que mon rafraichissement se fait sur le tableau même. Il s'effectue vu qu'au début le tableau est la avec les différentes données dedans puis il disparait et ne réapparait jamais.

Voici mon code en rapport avec mon problème :
dans mon fichier "tchatSeul.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
<html>
<head>
      <script type="text/javascript">
         function refresh_div()
{
var xhr_object = null;
if(window.XMLHttpRequest)
{ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
 
var method = 'POST';
var filename = 'contenuTchatPerso.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function()
{
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
document.getElementById('tableau').innerHTML = tmp;
}
}
 
xhr_object.send(document.getElementById('tableau').innerHTML);
setTimeout('refresh_div()', 1000);
}
</script>
</head>
<body onload='refresh_div();'>
<form method="post" name="formulaire3" action="" >
<fieldset>
    <span>>> TCHAT PRIV&Eacute; AUX VENGEURS <<</span>
    <div name="partie" id="convers">
        	<!-- Affichage de la convers actuelle -->
		<?php include("./contenuTchatPerso.php"); ?>
    </div>
    <table class="tchat">
        <!-- Formulaire pour entrer un nouvea message -->
      	<tr>
           	<td align="center"> <input type="text" title="Le message que vous voulez envoyer sur le tchat" id="messageTchatPersoModif" name="messageTchatPerso" maxlength="100" size="57" />
			<input type="submit"  title="Envoyer le message" class="centrer" value="Ok" />
            </td>
        </tr>		
</table>
</fieldset>
</form>	
</body>
</html>

et dans le fichier "contenuTchatPerso.php" :
[je passe la partie d'initialisation des variables]

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
<table name="tableau" id="tableau">
<?php
while ($m = mysql_fetch_array($req)) { 
                if ($m['dateMessage'] >= $datLim) { 
                        $req1 = mysql_query('SELECT * FROM joueurs WHERE id="'.$m['createur'].'"');
                        while ($j = mysql_fetch_array($req1)) {
                                $nomJoueur = $j['pseudo'] ; 
                        } ?>
        	<tr>
            	<td class="contenuTexte"><span class="couleurBlanc"><?php echo date('d/m/Y',$m['date']); ?>&nbsp;<?php echo date('H\hi',$m['date']) ; ?>&nbsp;<?php echo $nomJoueur ; ?>&nbsp;-&nbsp;</span><?php echo code(stripslashes($m['contenu'])) ; ?></td>
            </tr>
   	<?php
                } 
                else {          
                        $contenu=$m['contenuMessage'] ; $dat=$m['dateMessage'] ; $cr = $m['createurMessage'] ; 
                        mysql_query("DELETE FROM Chat WHERE date=\"$dat\" AND type=\"1\" AND createur=\"$cr\"") ;
                }
        } ?>
</table>

Voila si vous savez ce qui se passe ca m aiderai beaucoup ca fait une semaine que je suis sur ce probleme. J'ai tester la réactualisation avec ajax du div "convers" ca marche mon titre de tchat s affiche mais pareil mon tableau est la puis il est plus la :'(. J'ai meme fait la réactualisation AJAX à partir du fichier tchatSeul.php même mais la par contre le tableau s'affiche réactualisé. Mais bon ca m'interesse pas d'avoir toute ma page web dans le tableau.

Et quand je regarde le code source de la page mon tableau et ses données apparaissent.
Merci de m'aider

**andry.aime** · 19/10/2010, 12h41

Bonsoir,

Pour la methode POST, tu dois ajouter le header.

Code :

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

xhr_object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Un tableau n'a pas d'attribut name.
pourquoi ça:

xhr_object.send(document.getElementById('tableau').innerHTML);

Enfin si ça marchera, ce ne sera que pour une seule requête car tu auras 2 tables avec le même id="tableau".

A+.

**Lini62** · 19/10/2010, 13h44

et si j utilise la méthode GET je crois que je ne dois pas ajouter autre chose c'est ca ? j'ai du inversé. Pour

Code :

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

xhr_object.send(document.getElementById('tableau').innerHTML);

J'ai marqué document.getElementById('tableau').innerHTML car sinon il n'actualise pas. Le tableau est toujours le meme meme s'il a changé.
Sinon j ai essayé avec NULL. ca n'actualise pas non plus

Et j'ai essayé ce que vous avez marqué et ca n'actualise pas.

**andry.aime** · 19/10/2010, 14h18

Re,

et si j utilise la méthode GET je crois que je ne dois pas ajouter autre chose c'est ca ?

oui.

C'est le div avec l'id="convers" que tu dois rafraichir.

Met le setTimeout dans le onreadysatechange==4.

Code :

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

1
2
3
4
5
6
7
if(xhr_object.readyState == 4)
{
var tmp = xhr_object.responseText;
alert(tmp);//vérifie si la requete passe
document.getElementById('convers').innerHTML = tmp;
setTimeout('refresh_div()', 1000);
}

A+.

**Lini62** · 19/10/2010, 14h59

Ca ne change toujours rien.
Pour faire un point voici ou en est mon code :
Pour tchatSeul.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
 
    <head>
 
        <script type="text/javascript">
 
            function refresh_div() {
 
                var xhr_object = null;
 
                if(window.XMLHttpRequest){ // Firefox
 
                    xhr_object = new XMLHttpRequest();
 
                }
 
                else if(window.ActiveXObject){ // Internet Explorer
 
                        xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
 
                    }
 
                var method = 'GET';
 
                var filename = 'contenuTchatPerso.php';
 
                xhr_object.open(method, filename, true);
 
                xhr_object.onreadystatechange = function(){
 
                    if(xhr_object.readyState == 4){
 
                        var tmp = xhr_object.responseText;
 
                        alert(tmp);//vérifie si la requete passe
 
                        document.getElementById('convers').innerHTML = tmp;
 
                        setTimeout('refresh_div()', 1000);
 
                    }
 
                }
 
                xhr_object.send(document.getElementById('convers').innerHTML);
 
                // setTimeout('refresh_div()', 1000);
 
            }
 
        </script>
 
    </head>
 
    <body onload='refresh_div();'>
 
        <!-- Affichage du tchat -->
 
<form method="post" name="formulaire3" action="" >
 
    <fieldset class="tchatGauche" >
 
    <span class="titre">>> TCHAT PRIV&Eacute; AUX VENGEURS <<</span>
 
 
 
    <div name="partie" id="convers" style="overflow : auto ; <?php if ($affichLien) { ?>max-height : 120px ; <?php } else { ?>max-height : 300px ; <?php } ?> width : 550px ;">
 
 
 
 
 
            <!-- Affichage de la convers actuelle -->
 
            <?php include("./contenuTchatPerso.php"); ?>
 
        </div>
 
 
 
 
 
<script type="text/javascript">
 
toto = document.getElementById("convers").scrollHeight;
 
document.getElementById("convers").scrollTop=toto;
 
</script>
 
    <table class="tchat">
 
        <!-- Formulaire pour entrer un nouvea message -->
 
          <tr>
 
               <td align="center"> <input  style="overflow : auto ;" type="text" title="Le message que vous voulez envoyer sur le tchat" id="messageTchatPersoModif" name="messageTchatPerso" maxlength="100" size="57" />
 
                <input type="submit"  title="Envoyer le message" class="centrer" value="Ok" />
 
            </td>
 
        </tr>
 
        </table>
 
    </fieldset>
 
</form>    
 
</body>
</html>

Et pour contenuTchatPerso.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
 
     <table id="tableau" class="tchat">
 
<?php 
 
    $datLim = dateLimite() ; 
 
    $req2 = mysql_query('SELECT * FROM Chat WHERE date>="'.$datLim.'" AND type="1"');
 
    $nbMess = mysql_num_rows($req2) ;
 
    $req = mysql_query('SELECT * FROM Chat WHERE type="1" ORDER BY date ASC');
 
     while ($m = mysql_fetch_array($req)) { 
 
        if ($m['dateMessage'] >= $datLim) { 
 
            $req1 = mysql_query('SELECT * FROM joueursInscrits WHERE id="'.$m['createurMessage'].'"');
 
            while ($j = mysql_fetch_array($req1)) {
 
                $nomJoueur = $j['pseudo'] ; 
 
            } ?>
 
            <tr>
 
                <td class="contenuTexte"><span class="couleurBlanc"><?php echo date('d/m/Y',$m['date']); ?>&nbsp;<?php echo date('H\hi',$m['date']) ; ?>&nbsp;<?php echo $nomJoueur ; ?>&nbsp;-&nbsp;</span><?php echo code(stripslashes($m['contenu'])) ; ?></td>
 
            </tr>
 
 
 
        <?php
 
        } 
 
        else {         
 
            $contenu=$m['contenu'] ; $dat=$m['date'] ; $cr = $m['createur'] ; 
 
            mysql_query("DELETE FROM Chat WHERE date=\"$dat\" AND type=\"1\" AND createur=\"$cr\"") ;
 
        }
 
    } ?>
 
</table>

J'ai essayé de remplacer var filename='contenuTchatPerso.php' par var filename='tchatSeul.php'. Afin de voir si en demandant une mise à jour plus grande (la page entiere dans le div "convers" au lieu de simplement contenuTchatPerso) ca changer quelque chose. Eh ben oui quand je demande la page entière dans le div 'convers' le tableau s'actualise comme je veux. Le soucis c'est que je ne veux que la partie qui est dans contenuTchatPerso.php.

L'alerte me renvoie mon code