Probleme chat qui s'envoie pas [Résolu/Fermé]

Signaler
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016
-
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
-
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.

3 réponses

Messages postés
33017
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 juin 2021
3 574
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                                                                 
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

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" ?
Messages postés
33017
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 juin 2021
3 574 >
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

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.
Messages postés
33017
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
23 juin 2021
3 574
Et aussi...Dans le code js... ajoute un # devant beepaudio ...
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

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 ?
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

et il me dit aussi que mon apprendTo n'est pas une fonction ou elle est pas defini
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
1 542
slt


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


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


ça donne quoi ?
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

non sa change rien avec les deux points :/
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
1 542
et la parenthèse.
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

Je les rajouter aussu pas preciser desoler ^^
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
1 542
solution en dessous
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
1 542
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>
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

Merci !! sa fonctionne niquel :)
Messages postés
6400
Date d'inscription
vendredi 15 janvier 2010
Statut
Membre
Dernière intervention
22 juin 2021
1 542 >
Messages postés
55
Date d'inscription
mercredi 2 juillet 2014
Statut
Membre
Dernière intervention
23 octobre 2016

de rien :)