Liste deroulante en ajax
|
Malgon
Membre
Inscrit le 06 Mars 2008
51 messages
69 points
|
Posté le Lundi 23 Juin 2008 à 18:46
Salut, voila, j'aurais aimé réaliser une liste déroulante en ajax, genre la messagerie de mx-dev. Je sais que ça doit se faire en ajax mais je n'ai pas trop d'idée de comment le réaliser @+ Malgon
|
|
Matt 261
Webmaster
Inscrit le 13 Août 2007
115 messages
232 points
|
Posté le Marsdi 24 Juin 2008 à 15:53
Salut Malgon,
je vois que notre messagerie fait des émules ! mdrr !
En fait, il ne s'agit pas d'une liste déroulante mais d'une balise que l'on vient remplir avec du texte.
Je m'explique : lors de la récupération des messages privés des membres sur le serveur, le script affiche sur la page Date, Sujet, Récepteur + un espace blanc. Cet espace est répéré par l'indentifiant du message dans la base de données plus quelques ajouts "persos". Lors du clic sur le titre du message, cela va lancer un script Javascript. En fonction de la présence ou non de texte dans ladite balise, la fonction Javascript va contacter le serveur pour retourner le message ou alors effacer le texte contenu dans cette balise.
Voici le script que j'utilise (côté client, pour le serveur, une petite requête SQL et le tour est joué !) :
- Voila la structure type d'un message
<p onClick='javascript:showmail(ID-MAIL, ID-BALISE);'> SUJET DU MESSAGE</p> <div id='ID-BALISE'></div>
Les ID-MAIL et ID-BALISE sont générés par le script PHP. Lors d'un clic sur le sujet, Javascript va exécuter ma fonction showmail en envoyant comme paramètres l'identifiant du mail à aller chercher et où écrire le contenu. - La fonction maintenant :
<script type="text/javascript">  function writediv(texte, div)     {        document.getElementById(div).innerHTML = texte; //On écrit dans le div le texte envoyé par le serveur     }       function showmail(mail, div)    {    if(mail != '') //Si l'identifiant est bien indiqué       {          test = document.getElementById(div).innerHTML; //Récupération du contenu du div          if(test && test != '') //La zone est-elle vide ?             {                writediv('', div); //Si non, on efface                }          else             { //Si elle est bien vide, on va chercher le contenu du message              if(texte = file('mail.php?id='+escape(mail)))                         {//Et on l'affiche                      writediv('<p>'+texte+'<p>', div);                      writediv('', 'img-'+div);                         }             }        } else               writediv('Erreur lors de la lecture du message', div);
    }
function file(fichier)     { //Fonction de gestion des fichiers     if(window.XMLHttpRequest) // FIREFOX          xhr_object = new XMLHttpRequest();     else if(window.ActiveXObject) // IE          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");     else          return(false);     xhr_object.open("GET", fichier, false);     xhr_object.send(null);     if(xhr_object.readyState == 4) return(xhr_object.responseText);     else return(false);     } </script>
J'accorde aux puristes du Javascript qu'il y a plus simple : modifier simplement le style du message en affichant ou cachant via du css...
J'espère que tu arriveras à t'en sortir avec les explications, sinon, redemmande moi si ce n'est pas clair ;). Dès que la partie PHP sera ouverte, je posterais surement un tuto dessus ;)  ++   Matt
|
|
Malgon
Membre
Inscrit le 06 Mars 2008
51 messages
69 points
|
Posté le Marsdi 24 Juin 2008 à 20:14
salut, ok, merci c'est bon :) Â @+ Malgon
|
Participer à cet échange :
Pour participer à cet échange, vous devez vous connecter.