Ajax : écrire dans un div

Répondre
Zobaree
le 24/02/2008 à 21:04
Zobaree
Salut à tous!

J'ai un petit soucis, j'ai fais une shoutbox en php/sql/javascript tout bien intégrée à mon site. Pour afficher les messages j'ai utilisé du javascript comme ceci:
function showMessage(){
var x_object2 = null;
if(window.XMLHttpRequest){
x_object2 = new XMLHttpRequest();
}else if(window.ActiveXObject){
x_object2 = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('Votre navigateur de supporte pas la technologie AJAX(XMLHttpRequest)...');
return;
}


x_object2.open("POST","messages.php",true);
x_object2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
x_object2.send(null);

x_object2.onreadystatechange = function(){
if(x_object2.readyState==4){
if(x_object2.status==200){
self.frames["tchat"].document.body.innerHTML = x_object2.responseText;
descendreTchat();
Layer1.style.visibility="hidden";
}
}
}

}

(La façon dont s'affiche les messages est contenu dans message.php car je le réutilise pour autre chose.
Dans mon template, j'ai donc mis cela pour afficher les messages:
<iframe name="tchat" width="700px" height="350px" scrolling="auto" style="border: 0 solid;"></iframe>


Tout marche... cependant, c'est bien beau, mais les iframe c'est une hérésie, j'aimerais bien que ça s'affiche dans un div (avec scroll). Je me demandais si c'était possible. Si oui, que dois-je remplacer?

Merci à vous!
LA GLOBULE
le 24/02/2008 à 21:20
LA GLOBULE
Pour faire scroller un div, tu dois appliquer une propriété overflow: scroll au div.

Ensuite, je n'ai pas testé ton code, mais il semblerait qu'il récupère un texte pour l'écrire dans une iframe (truc de t'chat), et oui, forcément, c'est faisable avec un div.
Zobaree
le 24/02/2008 à 21:32
Zobaree
Yep, il récupère les messages contenus dans ma DB sql... (envoyés par un form)

Pourrais tu me donner un petit coups de main pour le div côté javascript? Après recherche je ne trouve pas...

Ca me parle pas du tout ce langage... :/
LA GLOBULE
le 24/02/2008 à 22:11
LA GLOBULE
Ben pour écrire dans un div, tu peux faire :

document.getElementById('id_du_div').innerHTML = 'du texte';
Zobaree
le 24/02/2008 à 23:13
Zobaree
Ha merci beaucoup, l'affichage fonctionne!
document.getElementById('shoutbox').innerHTML = x_object2.responseText;

<th height="300px"><div id="shoutbox"></div></th>


Comme tu peux le voir, le div fait fait parti d'un tableau. J'aimerais que la hauteur maximale soit de 300px, cependant, au fil des messages, la tableau s'agrandit.
Sais-tu comment limiter le nombre de messages affichés? Ce qui m'éviterait d'avoir un scrollbar et un tableau avec une taille immense...
LA GLOBULE
le 25/02/2008 à 01:03
LA GLOBULE
Ben comme je te l'ai dis, il faut mettre un overflow: scroll sur ton div pour qu'il scroll et que ton tableau ne grandisse pas.
Zobaree
le 25/02/2008 à 17:33
Zobaree
@ LA GLOBULE: Non justement j'aimerais éviter d'avoir un scroll, j'aimerais qu'il n'affiche que x messages dans le div...

@ Bzh: J'ai déjà donné une longueur/largeur, mais ça n'a pas résolu le problème du nombre de messages affiché :P

(Merci à vous deux!)
LA GLOBULE
le 25/02/2008 à 17:55
LA GLOBULE
Ben contrôle mieux ton JS pour savoir combien de message tu écris.

Et si tu dépasses un certain nombre (ou bien un certain nombre de caractères), ben effectue le traitement que tu veux (soir arrêter d'écrire, soit effacer le message le plus vieux, soit lancer un mp3, soit fermer le navigateur, je ne sais pas moi).
Zobaree
le 25/02/2008 à 21:32
Zobaree
En faite j'ai juste limité l'affiche dans la query (SELECT ... LIMIT 25).
Je ne sais pas si c'est une bonne solution, mais avec le js j'ai encore du mal... :)
Répondre
LoadingChargement en cours