Chatbox avec Ajax : poblème

Par Eckodrake, il y a 7 ans

Javascript

Bonjour,

je suis en train de créer une chatbox pour un travail de fin d'étude et je rencontre quelques problèms avec celle-ci. Je ne maîtrise pas beaucoup Ajax.
Le module est terminé à 90%, disons. Le soucis vient de l'insertion des données dans la DB de manière asynchrone. En gros :

Ce que je fais

Voici mon formulaire HTML

<form id="chatForm" method="post" action="action/ajax/Tavern2.php" class="container form-group"> <input id="chatId" type="hidden" value="{{ sessionUser.id }}"> <textarea id="chatMessage" name="chatMessage" cols="30" rows="10" class="form-control col-lg-12" placeholder="Message"></textarea> <button type="submit" id="chatSubmit" class="btn mt-2" name="chatSubmit">Envoyer</button> </form>

Voici mon code PHP pour l'insertion dans la DB

Database::getQuery( ' INSERT INTO ln_chatbox (idUser, datePub, message) VALUES (?, NOW(), ?)', [ $_POST['chatId']->id, $_POST['chatMessage'] ] ); header( 'location:/tavern' ); exit;

Voici mon code Ajax en relation avec l'insertion dans la DB

$('#chatSubmit').on('submit', function (e) { // Bloque l'event de base du btn e.preventDefault(); // Données récupérées du formulaires let chatId = encodeURIComponent($('#chatId').val()); let chatMessage = encodeURIComponent($('#chatMessage').val()); if (chatId !== '' && chatMessage !== '') { $.ajax({ url: '/action/ajax/Tavern2.php', type: 'POST', data: {chatId: chatId, chatMessage: chatMessage}, success: function () { select(); // Si tout OK, récupérer la fonction d'affichage de la chatbox }, error: function (xhr, ajaxOptions, thrownError) { console.log('[ERROR]' + xhr.status + ' ' + thrownError); } }); } });

Ce que je veux

Faire en sorte que les messages postés soient asynchrones.

Ce que j'obtiens

Alors ce n'est pas vraiment une erreur, mais quoi que je fasse, le message est soit posté de manière synchrone sans prendre compte Ajax soit le e.preventDefault() bloque complètement le code et rien ne se passe au click du submit.
Une idée ? Merci !

3 réponses

FactureHero.com, il y a 7 ans

Hello.

Côté JS

1/dans ta fonction callback success d'ajax:

  • mets en commentaire "select()"
  • Essaye de faire un console.log('ok') , et vérifie que "ok" s'affiche bien dans la console quand tu soumets un message
    Si le console.log() fonctionne, c'est ta fonction select côté JS qui ne marche pas comme attendu

2/ Dans cette même callback success tu executes donc la fonction select() - Tu peux poster ta fonction select() ?

3/ Aucune erreur dans la console du nav quand tu soumets un message ?

Sans préjuger de l'erreur, j'ai l'impression que ta fonction ne serait pas exécutée?

Côté PHP
Je vois 2 ou 3 problèmes sur ta requête SQL insert INTO:

  • Tu n'as pas une erreur de syntaxe ? Un guillemet de fermeture de ta requête avant qu'elle soit terminée (un var_dump ou print_r te ressortirai ça si c'est le cas).

  • Le nombre et l'ordre des valeurs n'est pas le même, pourquoi ne pas faire plutôt

INSERT INTO nom_table (champ1, champ2, champ3, ...) VALUES (valeur1, valeur2, valeur3, ...)

  • Es-tu sûr que tu envoies un objet et non pas une valeur dans le champ chat_id ? Parce que tu insère $POST['chatId']->id
    Si c'est une valeur, alors passe plutôt $POST['chatId'] tout simplement

Voilà ... des pistes, mais sans les console.log() en JS et les var_dump de ton PHP, c'est compliqué :) Essaye d'en mettre et tu va débugger ton code :)

Eckodrake, il y a 7 ans

Salut,
Effectivement il y avait des problèmes de valeur. J'étais passé de $SESSION['user']->id à $POST['id'] et j'avais oublié de retirer le ->id, entre autres. Merci pour l'aide, ça fonctionne ! :)

FactureHero.com, il y a 7 ans

Cool @Talenvi :) , si tu peux passer ton post en RESOLU sur ma réponse au dessus, ça clot le sujet ;)