Je n'arrive pas à bloque le lancement vers la page php en js [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, bonsoirs
J'ai realiser un chat en php ajax ... tout fonctionne à la perfection, sauf que mon formulaire s’exécute, malgrès mon code qui l'empeche de le faire je ne sais pas pourquoi ca ne fonctionne pas .

Se que je veut dire par << l'empeche >> , c'est d'empecher la redirection vers la page et evite un refresh de page.


Code ajax :

je vous partage uniquement la function qui permet d'ajouter un message.


function postMessage(event){

  event.preventDefault();


  const author = document.querySelector('#author');
  const content = document.querySelector('#content');


  const data = new FormData();
  data.append('author', author.value);
  data.append('content', content.value);


  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);
}



le code php qui s'execute


function postMessage(){
    global $bdd;

    if(!array_key_exists('author', $_POST) || !array_key_exists('content', $_POST)){
        echo json_encode(["status" => "error", "message" => "One field or many not been sent"]);
        return;
    }

    $destination = "coqpix".$_POST['author']."";
    $date_crea = date("d-m-Y");
    $date_h = date("H") + "1";
    if($date_h == "24"){
        $date_h = "00";
    }
    $date_m = date("i");
    $content = $_POST['content'];

    $query = $bdd->prepare('INSERT INTO chat_crea (destination, date_crea, date_h, date_m, message_crea) VALUES(?,?,?,?,?)');
    $query->execute(array(
        htmlspecialchars($destination),
        htmlspecialchars($date_crea),
        htmlspecialchars($date_h),
        htmlspecialchars($date_m),
        htmlspecialchars($content)
    ));

    echo json_encode(["status" => "sucess"]);
}



code html ...


<div class="card-body widget-chat-container widget-chat-demo-scroll">
                    <div class="chat-content" id="chat-content">
                        <!-- contenue renvoyé -->                        
                    </div>
                </div>
                <div class="card-footer border-top p-1">
                    <form class="d-flex" action="php/chat_crea.php?task=write" method="POST">
                        <input type="hidden" name="author" id="author" value="<?= $crea['name_crea'] ?>">
                        <input type="text" name="content" id="content" class="form-control chat-message-demo mr-75" placeholder="Tappez votre message...">
                        <button type="submit" class="btn btn-primary glow px-1"><i class="bx bx-paper-plane"></i></button>
                    </form>
                </div>
            </div>







la ligne qui est sencé empecher l'action de redirection vers la page php est :

event.preventDefault();


si je me trompe pas.

1 réponse

Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021
3 157
Bonjour,

Change le "type" de ton bouton... enlève le "submit" et remplace le par "button".

Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3 >
Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021

Oui, c'est un peu difficile à expliquer c'est bizzard je vous l'avoue.

pour illustrer se que je veut dire j'ai fait une petite video ... je ne sais pas si c'est autoriser mais voila.


https://www.youtube.com/watch?v=akg0dhyeJ7I
Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021
3 157 >
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021

Je t'avais indiqué que ton form ne te servait à rien.....
Retire les attributs action et method et le souci sera résolu
  <form class="d-flex" >
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3 >
Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021

J'ai une autre petite question ?

J'ai essaye de faire une condition pour faire un petit truc simpas qui consiste a que quand le message vien 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 ppour 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 ?
Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021
3 157 >
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021

Nouvelle question égale nouvelle discussion sur le forum...
En plus, réouvrir une discussion qui avait été mise comme traitée ce n'est pas la meilleure idée qu'on puisse avoir au risque que personne ne la remarque...
Donc, merci de remettre le sujet en résolu et de créer une nouvelle discussion propre à ce nouveau souci.
Messages postés
44
Date d'inscription
lundi 30 décembre 2019
Statut
Membre
Dernière intervention
4 janvier 2021
3 >
Messages postés
30910
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 janvier 2021

Ok merci