Sujet Précédent Sujet Suivant

Probleme chat qui s'envoie pas

Résolu/Fermé
LeaDerzRS6 Messages postés 55 Date d'inscription mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016 - Modifié par jordane45 le 22/06/2016 à 00:21
astuces72 Messages postés 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 - 22 juin 2016 à 23:09
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 38161 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2024 4 658
Modifié par jordane45 le 22/06/2016 à 00:31
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 mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
Modifié par LeaDerzRS6 le 22/06/2016 à 08:58 
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 38161 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2024 4 658 > LeaDerzRS6 Messages postés 55 Date d'inscription mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 09:10
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 38161 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2024 4 658
22 juin 2016 à 09:12
Et aussi...Dans le code js... ajoute un # devant beepaudio ...
0
LeaDerzRS6 Messages postés 55 Date d'inscription mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 09:24
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 mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 09:25
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 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 1 637
22 juin 2016 à 09:10
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 mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 09:23
non sa change rien avec les deux points :/
0
astuces72 Messages postés 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 1 637
22 juin 2016 à 09:25
et la parenthèse.
0
LeaDerzRS6 Messages postés 55 Date d'inscription mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 10:18
Je les rajouter aussu pas preciser desoler ^^
0
astuces72 Messages postés 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 1 637
22 juin 2016 à 10:23
solution en dessous
0
Réponse 3 / 3
astuces72 Messages postés 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 1 637
Modifié par astuces72 le 22/06/2016 à 09:49
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 mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 11:48
Merci !! sa fonctionne niquel :)
0
astuces72 Messages postés 7724 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 27 avril 2024 1 637 > LeaDerzRS6 Messages postés 55 Date d'inscription mercredi 2 juillet 2014 Statut Membre Dernière intervention 23 octobre 2016
22 juin 2016 à 23:09
de rien :)
0

Discussions similaires

site coco chat (incitation a payer)
cocorico66 -
Xileh -

108 réponses
'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
[SUJET GROUPÉ] Problèmes rencontrés sur le site COCO.
Pisceneo -
bazfile -

19 réponses
Je cherche une site de tchat gratuit pour adulte
faddygnato -
Freddy -

5 réponses
dessin de chat (avec le clavier)
dessinnaShadd ^_^ -
baladur13 -

7 réponses