Chat Ajax, Dernier message en haut

iTACHi
Javascript

Bonjour, j'ai suivi le tuto du raton pour créer une shoutbox, je voudrais que les derniers messages s'affichent les uns au-dessus des autres, avoir le dernier message en haut, au lieu de l'avoir en bas, cependant je galere a adapter certaines fonctions que j'ai pu voir sur google qui le font... si quelqu'un pourrait m'aider, ce serait sympas :)

Voici mon code js

function getMessages(){
    $.post(url,{action:"getMessages",lastid:lastid},function(data){
            if(data.erreur=="ok"){
                $("#tchat").append(data.result);
                lastid=data.lastid;
            }
            else{
                alert(data.erreur);
            }
        },"json");
        return false;
}

Et voici la fonction que j'ai pu trouver sur le net qui inverse les messages ... 

function rec_chatcontent(cont1) {
         if (cont1 != "") {
         out1 = "";
         /* Display Last Message First */
        while (cont1.indexOf("\n") > -1) {
           out1 = cont1.substr(0, cont1.indexOf("\n")) + "\n" + out1;
          cont1 = cont1.substr(cont1.indexOf("\n") + 1);
         }
         out1 = unescape(out1);
         if (chatwindow.value != out1) { display_msg(out1); }
         intUpdate=window.setTimeout("read_cont()", waittime);
      }   
   }

Merci de votre aide car là je suis paumé, et il faut avouer, que c'est bien ennervant d'actualiser sa page plusieurs fois par jours ou de descendre la page du chat pour arriver à lire... :(

4 réponses

iTACHi
Auteur

Je sais qu'il faut utiliser ses trois fonctions : file_get_contents(), array_reverse() et explode mais où j'en sais rien... voilà le code php qui appelle l'ajax :)

/**
    *Actio : getMessages
    *Permet l'affichage des derniers messages
    **/
    if($_POST"action"] =="getMessages"){
    $rangcouleur = array(
    "1" => "admin",
    "2" => "supmodo",
    "3" => "modo",
    "4" => "vip",
    "5" => "uploader",
    "6" => "power",
    "7" => "user",
);
        $lastid = floor($lastid);
        $message = ($_POST"action"]);
        $sql = ("SELECT Shoutbox.id, Shoutbox.pseudo, Shoutbox.message, Shoutbox.date, users.role_id
FROM Shoutbox LEFT JOIN users ON users.NiCK = Shoutbox.pseudo WHERE Shoutbox.id>$lastid ORDER BY Shoutbox.date DESC");
        $req = $PDO->query($sql);
        $d"lastid"] = $lastid;
        $d"result"] = ""; 
        while ($data = $req->fetch(PDO::FETCH_ASSOC)){

            $d"result"].= '<p><span class="'.$rangcouleur$data"role_id"]].'">'.($data"pseudo"]).'</span> ('.date("d/m/Y H:i:s",$data"date"]).') : '.str_replace( ":)", '<img src="images/nice.png" alt=":)">',''.str_replace( ":(", '<img src="sad.gif" alt=":(">',''.str_replace( ":d", '<img src="images/grin.png" alt=":d">',''.str_replace( ":f", '<img src="images/f.png" alt=":f">',''.str_replace( ":p", '<img src="images/ouf.png" alt=":p">',''.str_replace( ":g", '<img src="images/sceptique.png" alt=":g">',''.str_replace( ":o", '<img src="images/OO.png" alt=":o">',''.str_replace( ":a", '<img src="images/Amour.png" alt=":a">',''.str_replace( ":v", '<img src="images/angry.png" alt=":v">',''.str_replace( ":Murey", '<img src="images/Murey.png" alt=":Murey">',''.str_replace( "XD", '<img src="images/XD.png" alt="XD">',''.str_replace( ":z", '<img src="images/z.png" alt=":z">',''.str_replace( ":smoke", '<img src="images/smoke.png" alt=":smoke">',''.str_replace( ":i", '<img src="images/i.png" alt=":i">',''.str_replace( ";^^", '<img src="images/;^^.png" alt=";^^">',''.str_replace( "OMG", '<img src="images/omg.png" alt="OMG">',''.str_replace( ":y", '<img src="images/yo.png" alt=":y">',''.str_replace( ":wave", '<img src="wavenoir.gif" alt=":wave">',''.str_replace( ";)", '<img src="wink.gif" alt=";)">',''.str_replace( ":suck", '<img src="smiley suce.gif" alt=":suce">',''.str_replace( ":Ange", '<img src="innocent.gif" alt=":Ange">',''.str_replace( ":'(", '<img src="cry.gif" alt=":\'(">',''.str_replace( ":blush", '<img src="blushnoir.gif" alt=":blush">',''.str_replace( ":love:", '<img src="love.gif" alt=":love:">',''.str_replace( ":k", '<img src="kissnoir.gif" alt=":k">',''.str_replace( "OO", '<img src="w00t.gif" alt="OO">',''.str_replace( ":woot:", '<img src="w000t.gif" alt=":woot:">',''.str_replace( ":lol:", '<img src="laugh.gif" alt=":lol:">',''.str_replace( ":-/", '<img src="confused.gif" alt=":-/">',htmlentities(utf8_decode($data"message"]))))))))))))))))))))))))))))))).'</p>';
            $d"lastid"] = $data"id"];
        }
        $d"erreur"]="ok";   
    }

Bon dedans il y a un str_replace pour les smileys ainsi qu'un code couleur pour les classes de mes users, mais ça ne gêne en rien mon code, il fonctionne tres bien, cela dit, j'aimerais vraiment avoir ces derniers messages en haut afin de pouvoir caller mon chat dans un bloc div et ne plus avoir a descendre la page ou a refresh pour pouvoir tchatter tranquillement :)

wilose

Bonjour,
j'ai le même problème,
j'ai regardé du coter js pour descendre la barre de défilement à chaque fois que l'on tchat, mais sans résultat,
donc moi aussi j'aimerais savoir.

iTACHi
Auteur

j'ai trouvé la solution, c simple, dans le js, tu met .prepend a la place de .append, tu deplaces le <div id="textarea"> et le <form> au dessus du SELECT dans la partie php, et les messages s'afficheront les uns au dessus des autres, cela dit, reste encore le refresh pour qu'il les appelle en ASC mais les derniers messages ;)

Pour ça tu fais un SELECT avec un ORDER BY date DESC LIMIT (le nombre des messages que tu veux afficher au refresh) , un array_reverse de ton fetchall du SELECT (dans la partie php) et ensuite un foreach de l'array_reverse sur la variable qui lit ton contenu :)

wilose

Merci, coter js c'est bon mais coter php je n'est pas tout saisi...