IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Rafraichissement de tableau avec ajax


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 3
    Par défaut [AJAX] Rafraichissement de tableau avec ajax
    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

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    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+.

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 3
    Par défaut
    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.

  4. #4
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    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+.

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 3
    Par défaut
    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

  6. #6
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Re,

    xhr_object.send(document.getElementById('convers').innerHTML);
    Pour la methode GET, tu dois passer les variables en URL, en plus la syntaxe est comme ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    "var1=valeur1&var2=valeur2"
    Que veux tu envoyer au serveur justement
    <input type="submit" title="Envoyer le message" class="centrer" value="Ok" />
    Le click sur un bouton submit rafraichi la page en entière.

    $req = mysql_query('SELECT * FROM Chat WHERE type="1" ORDER BY date ASC');
    Dans une requête sql, on utilise des simples quotes pour les valeurs mais pas de double quotes.

    Le soucis c'est que je ne veux que la partie qui est dans contenuTchatPerso.php.
    Que retourne l'alert quand tu appelles cette page?

    Je te conseille de lire ce tuto Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

    A+.

Discussions similaires

  1. [AJAX] Lier une liste avec un tableau avec Ajax
    Par hakou08 dans le forum AJAX
    Réponses: 4
    Dernier message: 03/04/2009, 10h53
  2. Réponses: 13
    Dernier message: 30/03/2009, 15h53
  3. Réponses: 7
    Dernier message: 02/09/2008, 17h16
  4. [Prototype/JQuery] tableau avec ajax
    Par friedamichelle dans le forum jQuery
    Réponses: 3
    Dernier message: 26/08/2008, 16h57
  5. [AJAX] Compléter un tableau avec Ajax
    Par nic2t dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 07/02/2008, 16h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo