Probleme chat qui s'envoie pas

Résolu
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention   -  
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   -
Bonsoir,

au niveau de mon code javascript je ne comprend pas quand j'appuis sur sur entrer et que j'ai ecri tmon texte cela doit se mettre dans ma chabox mais non il ne s'nvoie pas et je trouve pas mon erreur pourriez vous m'aidez peut etre une erreur d'inatention mais je comprend pas ou trouve pas.

Cordialement 

<!DOCTYPE html>
<html>
 <head>
  <title>Message chat</title>
  <meta charset="UTF-8" />
  <script src="js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("#msgUser").focus();
   
   $('<audio id="beepAudio"><source type="audio/mpeg" src="mus.mp3">').apprendTo('body');
   
   $("#sendButton").click(function(){
    var msg = $("#msgUser").val().trim();
    $("msgUser").val('');
    $("#msgUser").focus();
    
    if(msg.length > 0){
     $("<li></li>").html('<img src="me.jpg" alt=""><span>'+msg+'</span>').apprendTo("#chatMsg");
    $("#chatContent").animate({scrollTop($("#chatContent").height()}, "slow");
    $("beepAudio").get(0).play();
    }
   });
   $("#msgUser").keypress(function(event){
    if(event.which == 13){
     if($("#entrer").prop("checked")){
      event.preventDefault();
      $("#sendButton").click();
     }
    }
   });
  })
  </script>
  
  <style>
  body{background-color:#F2F2F2;}
  h1{text-align: center; text-shadow: 2px 2px 3px #ccc; font-size: 35px;}
  #chatBox {
   widht: 420px;
   border: 1px solid #000;
   border-radius:5px;
   margin:auto;
   background-color: #ccc;
  }
  #chatContent{
   max-height: 200px;
   overflow-y: auto;
   max-width: inherit;
  }
  
  #chatMsg{
   list-style-type:none;
  }
  #chatMsg > li{
   padding: 5px;
   margin: 10px 0px 4px 0px;
   clear: both;
  }
  
  #chatMsg > li> img{
   float: left;
   border: 1px solid #FFF;
  }
  
  #chatMsg > li> span {
   float: left;
   margin-left:5px;
   width: 350px; 
  }
  
  #msgUser{
   width: 320px;
   border: 1px solid #222;
   padding: 5px;
   margin: 5px;
  }
  #sendButton{
   border: 1px solid #222;
   padding:4px;
   background-color: #B22222;
   border-radius: 3px;
   color: #FFF;
   font-weight: bold;
   
   
  }
  </style>
 </head>
 <body>
  <h1>chat test avec X</h1>
  
  <div id="chatBox">
   
   <div id="chatContent">
   
    <ul id="chatMsg">
    <li><img src="me.jpg" alt=""><span>salut !!</span></li>
    <li><img src="me.jpg" alt=""><span>d !!</span></li>
    <li><img src="me.jpg" alt=""><span>g !!</span></li>
    <li><img src="me.jpg" alt=""><span>hd !!</span></li>
    </ul>
   
   </div>
  <input type="text" id="msgUser" placeholder="Entrer votre message !"/>
  <input type="button" value="Envoyer" id="sendButton"><br>
   <input type="checkbox" id="enter"> Envoie du message avec la touche "Entrée"
  </div>
 </body>
</html>


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

1 - Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code



2 - Plutôt que de faire une "simulation" du "click" sur un bouton ... il est préférable d’appeler directement une fonction.

3 - Ensuite, pour la touche "enter" .. il est préférable de tester le keycode comme ceci : 
 
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){


Donc, Essayes ça : 
$("#sendButton").click(function(){
     sendMessage();
 });
   
$("#msgUser").keypress(function(event){
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13'){
     if($("#entrer").prop("checked")){
       event.preventDefault();
       sendMessage();
     }
  }
});

  
 function sendMessage(){
   var msg = $("#msgUser").val().trim();
   $("msgUser").val('');
   $("#msgUser").focus();
    
  if(msg.length > 0){
     $("<li></li>").html('<img src="me.jpg" alt=""><span>'+msg+'</span>').apprendTo("#chatMsg");
     $("#chatContent").animate({scrollTop($("#chatContent").height()}, "slow");
     $("beepAudio").get(0).play();
  }
}


3 - A tout hasard... pense à regarder dans la CONSOLE de ton navigateur internet (je te conseille d'utiliser le plugin Firebug pour Firefox) pour voir si il ne t'indiquerait pas d'éventuelles erreurs dans le code.

Cordialement, 
Jordane                                                                 
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
  
Bonjour,
Meme en copiant betement ton code cela ne fonctionne mais aussi il n'y a aucune erreur quand je vais sur mon index.php et j'utilise chrome. 
<code php><!DOCTYPE html>
<html>
 <head>
  <title>Message chat</title>
  <meta charset="UTF-8" />
  <script src="js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("#msgUser").focus();
   
   $('<audio id="beepAudio"><source type="audio/mpeg" src="mus.mp3">').apprendTo('body');
   
   $("#sendButton").click(function(){
     sendMessage();
 });
   
$("#msgUser").keypress(function(event){
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13'){
     if($("#entrer").prop("checked")){
       event.preventDefault();
       sendMessage();
     }
  }
});

  
 function sendMessage(){
   var msg = $("#msgUser").val().trim();
   $("msgUser").val('');
   $("#msgUser").focus();
    
  if(msg.length > 0){
     $("<li></li>").html('<img src="me.jpg" alt=""><span>'+msg+'</span>').apprendTo("#chatMsg");
     $("#chatContent").animate({scrollTop($("#chatContent").height()}, "slow");
     $("beepAudio").get(0).play();
  }
}
   });
  
  </script>
  
  <style>
  body{background-color:#F2F2F2;}
  h1{text-align: center; text-shadow: 2px 2px 3px #ccc; font-size: 35px;}
  #chatBox {
   widht: 420px;
   border: 1px solid #000;
   border-radius:5px;
   margin:auto;
   background-color: #ccc;
  }
  #chatContent{
   max-height: 200px;
   overflow-y: auto;
   max-width: inherit;
  }
  
  #chatMsg{
   list-style-type:none;
  }
  #chatMsg > li{
   padding: 5px;
   margin: 10px 0px 4px 0px;
   clear: both;
  }
  
  #chatMsg > li> img{
   float: left;
   border: 1px solid #FFF;
  }
  
  #chatMsg > li> span {
   float: left;
   margin-left:5px;
   width: 350px; 
  }
  
  #msgUser{
   width: 320px;
   border: 1px solid #222;
   padding: 5px;
   margin: 5px;
  }
  #sendButton{
   border: 1px solid #222;
   padding:4px;
   background-color: #B22222;
   border-radius: 3px;
   color: #FFF;
   font-weight: bold;
   
   
  }
  </style>
 </head>
 <body>
  <h1>chat test avec X</h1>
  
  <div id="chatBox">
   
   <div id="chatContent">
   
    <ul id="chatMsg">
    <li><img src="me.jpg" alt=""><span>salut !!</span></li>
    <li><img src="me.jpg" alt=""><span>d !!</span></li>
    <li><img src="me.jpg" alt=""><span>g !!</span></li>
    <li><img src="me.jpg" alt=""><span>hd !!</span></li>
    </ul>
   
   </div>
  <input type="text" id="msgUser" placeholder="Entrer votre message !"/>
  <input type="button" value="Envoyer" id="sendButton"><br>
   <input type="checkbox" id="enter"> Envoie du message avec la touche "Entrée"
  </div>
 </body>
</html>


Maos sa serai possible d'emmetre le bruit meme si j'envoie pas le msg afin de voir quel partie du code est "bloquer" ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
Ajoutes de console.log dans ton code .. et regardes dans la console du navigateur si ils s'affichent. .. comme ça tu verras où ça bloque.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Et aussi...Dans le code js... ajoute un # devant beepaudio ...
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
j'ai mit le # et dans la console chrome sa m'affiche ceci :
localhost/:35 Uncaught SyntaxError: Unexpected token (
et a cette ligne c'est : $("#chatContent").animate({scrollTop($("#chatContent").height()}, "slow");
pourtant je pense que sa n'a rien a voir avec l'envoie du message ?
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
et il me dit aussi que mon apprendTo n'est pas une fonction ou elle est pas defini
0
Réponse 2 / 3
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
slt 


$("#chatContent").animate({scrollTop:($("#chatContent")).height()}, "slow");


$("#chatContent").animate({scrollTop($("#chatContent").height()}, "slow");


ça donne quoi ?
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
non sa change rien avec les deux points :/
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
et la parenthèse.
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
Je les rajouter aussu pas preciser desoler ^^
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
solution en dessous
0
Réponse 3 / 3
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641
 
il manquait des #
des apprend pour des append...
erreur entrer pour enter
et j'en passe... 


<!DOCTYPE html>
<html>
 <head>
  <title>Message chat</title>
  <meta charset="UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("#msgUser").focus();
   
   
   $("#sendButton").click(function(){
    var msg = $("#msgUser").val().trim();
    $("#msgUser").val('');
    $("#msgUser").focus();
      $('<audio id="beepAudio"><source type="audio/mpeg" src="mus.mp3">').appendTo('body');
    if(msg.length > 0){
     $("<li></li>").html('<img src="me.jpg" alt=""><span>'+msg+'</span>').appendTo("#chatMsg");
    $("#chatContent").animate({scrollTop:($("#chatContent")).height()}, "slow");
     $("#beepAudio").get(0).play();
    }
   });
   $("#msgUser").keypress(function(event){
    if(event.which == 13){
  
     if($("#enter").prop("checked")){
      event.preventDefault();
      $("#sendButton").click();

     }
    }
   });
  })
  </script>
  
  <style>
  body{background-color:#F2F2F2;}
  h1{text-align: center; text-shadow: 2px 2px 3px #ccc; font-size: 35px;}
  #chatBox {
   widht: 420px;
   border: 1px solid #000;
   border-radius:5px;
   margin:auto;
   background-color: #ccc;
  }
  #chatContent{
   max-height: 200px;
   overflow-y: auto;
   max-width: inherit;
  }
  
  #chatMsg{
   list-style-type:none;
  }
  #chatMsg > li{
   padding: 5px;
   margin: 10px 0px 4px 0px;
   clear: both;
  }
  
  #chatMsg > li> img{
   float: left;
   border: 1px solid #FFF;
  }
  
  #chatMsg > li> span {
   float: left;
   margin-left:5px;
   width: 350px; 
  }
  
  #msgUser{
   width: 320px;
   border: 1px solid #222;
   padding: 5px;
   margin: 5px;
  }
  #sendButton{
   border: 1px solid #222;
   padding:4px;
   background-color: #B22222;
   border-radius: 3px;
   color: #FFF;
   font-weight: bold;
   
   
  }
  </style>
 </head>
 <body>
  <h1>chat test avec X</h1>
  
  <div id="chatBox">
   
   <div id="chatContent">
   
    <ul id="chatMsg">
    <li><img src="me.jpg" alt=""><span>salut !!</span></li>
    <li><img src="me.jpg" alt=""><span>d !!</span></li>
    <li><img src="me.jpg" alt=""><span>g !!</span></li>
    <li><img src="me.jpg" alt=""><span>hd !!</span></li>
    </ul>
   
   </div>
  <input type="text" id="msgUser" placeholder="Entrer votre message !"/>
  <input type="button" value="Envoyer" id="sendButton"><br>
   <input type="checkbox" id="enter"> Envoie du message avec la touche "Entrée"
  </div>
 </body>
</html>
0
LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
Merci !! sa fonctionne niquel :)
0
astuces72 Messages postés 7769 Date d'inscription   Statut Membre Dernière intervention   1 641 > LeaDerzRS6 Messages postés 55 Date d'inscription   Statut Membre Dernière intervention  
 
de rien :)
0

Discussions similaires

COCO : où aller ensuite ?
MysticMagic77 -
bendrop -

1 réponse
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Il n'y a rien qui remplace coco, j'avais des amies...
Veritaspantchua -
bendrop -

1 réponse
site coco bloquer definitivement
dani88 -
Pierr10 -

4 réponses
Bounty, une alternative à coco.gg ?
dodoedoro -
brucine -

1 réponse