Faire des condictions en js, dans un script de chat [Résolu]

Signaler
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
-
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
-
Bonjours,

J'ai essaye de faire une condition pour faire un petit truc sympas qui consiste a que quand le message viens de moi il s'affiche à droite et quand il vient d'une autre personne il s'affiche à gauche.

Dans mon CSS c'est la class "chat-fleft" qui fait cela mais je ne sais pas comment faire pour introduire cela dans mon code js ?

J"ai tenté un petit truc :


requeteAjax.onload = function(){
    const resultat = JSON.parse(requeteAjax.responseText);
    const html = resultat.reverse().map(function(message){

      if(${message.you} == "coqpix"){
        var droite = '';
      }else{
        var droite = 'chat-left',
      }
        
      return `<div class="chat droite">
                            <div class="chat-body">
                                <div class="chat-message">
                                    <p>${message.message_crea}</p>
                                    <span class="chat-time">${message.date_h}:${message.date_m}</span>
                                </div>
                            </div>
                        </div>`
        }).join('');



j'ai mit une condition if pour que quand la colonne de la bdd you !== a coqpix , il y mettent la class css
Je pense que cela vient d'un problème d'inscrementation ?

2 réponses

Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 192
     return `<div class="chat ${droite}">


Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3
Ah oui je suis bête, mais le pb ne viens pas de la,

dans le navigateur ca signale une erreur de syntax


ligne 19 correspond à

if(${message.you} == "coqpix"){
Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 192 >
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021

Tu as confondu la virgule et le point virgule.. à la fin de ta ligne de code
var droite = 'chat-left',
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3 >
Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021

Ah ouiiiii '-', mais non ca me dit toujours l'erreur et j'ai bien pense a vider le cash --'


if(${message.you} == "coqpix"){
        var droite = '';
      }else{
        var droite = 'chat-left';
      }



sur mon editeur de test ca dignale cela
Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 192 >
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021

Comme d'habitude, il nous faut le code complet ainsi que le message d'erreur.
Pour ce qui est de ton éditeur, impossible de te répondre ne sachant pas quel éditeur tu utilises et de toute façon il se peut que je n'utilise pas le même...

Il serait bien également que tu nous donnes le code généré ( celui que tu peux récupérer en appuyant sur la touche ctrl+U de ton clavier lorsque tu affiche la page dans ton navigateur)
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3
Ok pas de soucis pour l'intégralité du code le voici :

code js du chat


/**
 * Codons un chat en HTML/CSS/Javascript avec nos amis PHP et MySQL
 */

/**
 * Il nous faut une fonction pour récupérer le JSON des
 * messages et les afficher correctement
 */
function getMessages(){
  // 1. Elle doit créer une requête AJAX pour se connecter au serveur, et notamment au fichier ../../../../html/ltr/coqpix/php/chat_crea.php
  const requeteAjax = new XMLHttpRequest();
  requeteAjax.open("GET", "../../../../html/ltr/coqpix/php/chat_crea.php");

  // 2. Quand elle reçoit les données, il faut qu'elle les traite (en exploitant le JSON) et il faut qu'elle affiche ces données au format HTML
  requeteAjax.onload = function(){
    const resultat = JSON.parse(requeteAjax.responseText);
    const html = resultat.reverse().map(function(message){

      if(${message.you} == "coqpix"){
        var droite = '';
      }else{
        var droite = 'chat-left';
      }
        
      return `<div class="chat ${droite}">
                            <div class="chat-body">
                                <div class="chat-message">
                                    <p>${message.message_crea}</p>
                                    <span class="chat-time">${message.date_h}:${message.date_m}</span>
                                </div>
                            </div>
                        </div>`
        }).join('');

    const messages = document.querySelector('.chat-content');

    messages.innerHTML = html;
    messages.scrollTop = messages.scrollHeight;
  }

  // 3. On envoie la requête
  requeteAjax.send();
}

/**
 * Il nous faut une fonction pour envoyer le nouveau
 * message au serveur et rafraichir les messages
 */

function postMessage(event){
  // 1. Elle doit stoper le submit du formulaire
  event.preventDefault();

  // 2. Elle doit récupérer les données du formulaire
  const author = document.querySelector('#author');
  const content = document.querySelector('#content');

  // 3. Elle doit conditionner les données
  const data = new FormData();
  data.append('author', author.value);
  data.append('content', content.value);

  // 4. Elle doit configurer une requête ajax en POST et envoyer les données
  const requeteAjax = new XMLHttpRequest();
  requeteAjax.open('POST', '../../../../html/ltr/coqpix/php/chat_crea.php?task=write');
  
  requeteAjax.onload = function(){
    content.value = '';
    content.focus();
    getMessages();
  }

  

  requeteAjax.send(data);
  return false;

}

document.getElementById('btn_submit').addEventListener('click', event => {
  postMessage(event);
});

/**
 * Il nous faut une intervale qui demande le rafraichissement
 * des messages toutes les 3 secondes et qui donne 
 * l'illusion du temps réel.
 */
const interval = window.setInterval(getMessages, 5000);

getMessages();



Pour l’éditeur j'utilise VS Code.


<div class="widget-chat-demo">
        <button class="btn btn-danger chat-demo-button glow px-1"><i class="livicon-evo" data-options="name: comments.svg; style: lines; size: 24px; strokeColor: #fff; autoPlay: true; repeat: loop;"></i></button>
        <div class="widget-chat widget-chat-demo d-none">
            <div class="card mb-0">
                <div class="card-header border-bottom p-0">
                    <div class="media m-75">
                        <a href="JavaScript:void(0);">
                            <div class="avatar mr-75">
                                <img src="../../../app-assets/images/ico/crea.png" alt="avtar images" width="32" height="32">
                                <span class="avatar-status-online"></span>
                            </div>
                        </a>
                        <div class="media-body">
                            <h6 class="media-heading mb-0 pt-25"><a href="javaScript:void(0);">ha</a></h6>
                            <span class="text-muted font-small-3">Active</span>
                        </div>
                        <i class="bx bx-x widget-chat-close float-right my-auto cursor-pointer"></i>
                    </div>
                </div>
                <div class="card-body widget-chat-container widget-chat-demo-scroll">
                    <div class="chat-content" id="chat-content">
                        
                    </div>
                </div>
                <div class="card-footer border-top p-1">
                    <div class="d-flex">
                        <input type="hidden" name="author" id="author" value="ha">
                        <input type="text" name="content" id="content" class="form-control chat-message-demo mr-75" placeholder="Tappez votre message...">
                        <button id="btn_submit" type="button" class="btn btn-primary glow px-1"><i class="bx bx-paper-plane"></i></button>
                    </div>
                </div>
            </div>
        </div>

    </div>



Div du chat

Concernant les erreurs, il n'y a que celle ci dessus qui est signalé
Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 192
Remplaces ton if/else par
var droite = message.you != "coqpix" ? 'chat-left' : '';
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3 >
Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021

Oui ca fonctionne merci beaucoup !!!!!!!!