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 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 ?
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)
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();
dans le navigateur ca signale une erreur de syntax
ligne 19 correspond à
sur mon editeur de test ca dignale cela
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)