Problème tchat jquery

Par Nagraria, il y a 10 ans

Javascript

'''
'''

Bonjour !
J'essaie de créer un simple systeme de tchat en jquery, mais seulement lorsque je post mon message il ne s'affiche que 1 demi seconde avant de disparaitre, je ne vois pas du tout d'où ca peut venir ...

Voila le code !

<script type="text/javascript"> $(document).ready(function(){ $("#message").focus(); $("#send").click(function(){ var msg = $("#message").val().trim(); $("#message").val(''); $("#message").focus(); if(msg.length > 0){ $('<p></p>').html(msg).appendTo("#msg_val"); } }); }) </script> <h2>Espace de tchat</h2> <h3>Les derniers messages</h3> <div class="messages" id="msg_val"></div> <div id="form_tchat"> <form method="post" class="form_tchat"> <label for="message">Votre message :</label><br /><br/> <textarea id="message" maxlength="250" ></textarea> <input type="submit" id="send" value="Envoyer" /> </form> </div>

J'ai bien inclus jquery, merci de votre aide j'espere avoir été assez précis !

4 réponses

Defy, il y a 10 ans

si tu ouvre la console, ou alors que tu envoie le message dans la console il te ressort quoi?

betaWeb, il y a 10 ans

Salut,

Est-ce que tu pourrais reformater ton post stp, on ne comprend pas grand chose là.

Nagraria, il y a 10 ans

Oui désolé le html a été executé et non affiché, le revoila :

<div id="form_tchat"> <form method="post" class="form_tchat"> <label for="message">Votre message :</label><br /><br/> <textarea id="message" maxlength="250" ></textarea> <input type="submit" id="send" value="Envoyer" /> </form> </div>

et le jquery :

$(document).ready(function(){ $("#message").focus(); $("#send").click(function(){ var msg = $("#message").val().trim(); $("#message").val(''); $("#message").focus(); if(msg.length > 0){ $('<p></p>').html(msg).appendTo("#msg_val"); } }); })

Je ne sais pas trop comment me servir de la console, je débute encore.
Merci de vos réponses !

antho07, il y a 10 ans

Bonjour,
ton message ne disparait pas. C'est ta page qui se recharge.
Pourquoi?
Parce que ton bouton est de type submit et va donc enclencher la soumission du formulaire.
Il faut donc couper ce comportement par défaut au moment du click. JQuery expose pour ça une méthode preventDefault() attaché aux évènements propagées.

Ainsi modifie ton script :

$(document).ready(function(){ $("#message").focus(); $("#send").click(function(e){ // e = event click propagé par ton click sur envoyer e.preventDefault(); // on coupe le comportement par défaut var msg = $("#message").val().trim(); $("#message").val(''); $("#message").focus(); if(msg.length > 0){ $('<p></p>').html(msg).appendTo("#msg_val"); } }); })

Cordialement