Problème JS/Ajax Fermé

Question

Bonjour, J'ai grand besoin d'aide en JS. Premier Point, je n'arrive pas a récupérer un variable nécessaire à l'exécution $(document).ready(function(){ La varaible ci-dessous var idSuj = document.getElementById(idSuj); $("#reply"+idSuj).click(function(e) { e.preventDefault() var formulaire = document.getElementById('formrep'+idSuj); var fileInput = document.getElementById('imgFile_'+idSuj); var formData = new FormData(formulaire); formData.append('file', fileInput.files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', 'ajax_comment.php'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.log('Une erreur est survenue : ' + xhr.status); } }; xhr.send(formData); }); }); Je n'arrive pas à récupérer en JS : $suj['id_sujet'] pour l'identification du

et pour lier le commentaire au sujet. ---------------------------------------- Autre point, à l'exécution il ne se passe rien. Ma page n'affiche pas le commentaire posté en JS Un code HTML/PHP récupère tous le post avec le code ci-dessous

prepare($req); $requet->execute($dat); }catch(Exception $e){ echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($dat); } $nb = 0; while ($suj = $requet->fetch()){ $nb++; $id_sujet = $suj['id_sujet']; $text = $suj['texte_sujet']; $img_sujet = $suj['img_sujet']; $tn_img_sujet = $suj['tn_img_sujet']; $sql_count = 'SELECT COUNT(com_test.id_sujet) AS idSuj, sujet.id_sujet FROM com_test INNER JOIN sujet ON com_test.id_sujet = sujet.id_sujet WHERE com_test.id_sujet = :id_sujet_count'; $dataCount = array(':id_sujet_count'=>$id_sujet); try{ $reqCount = $pdo->prepare($sql_count); $reqCount->execute($dataCount); }catch(Exception $e){ echo " Erreur ! ".$e->getMessage(); echo " Les datas : " ; print_r($dataCount); } $count_com = $reqCount->fetch(); $nb_com = $count_com['idSuj']; ?>

"; echo nl2br($text); echo "

"; if(!empty($img_sujet)){?>

';?>

$suj['id_sujet']); try{ $requete = $pdo->prepare($req_com); $requete->execute($data); while($com = $requete->fetch()){ $img_com_show = $com['img_com']; $tn_img_com_show = $com['tn_img_com']; $id_com = $com['id_com']; ?>

'; ?>

" name="" action="blog_test.php#com" method="post" enctype="multipart/form-data">

Photos

" class="btn btn-primary btn-sm publier_com" value="Publier">

getMessage(); echo " Les datas : " ; print_r($data); } ?>

Merci d'avance pour votre aide Je m'arrache vraiment les cheveux Macintosh / Chrome 112.0.0.0

jordane45 · Answer

Bonjour

Déjà, dans ton premier code, ligne 3, il manque des côtes autour de l'id de l'élément que tu veux récupérer

Pour le reste, il faudra regarder dans la console avec le mode XHR activé et nous dire ce que ça t'affiche

delaville81 · Answer

Voici mon code modifié

$(document).ready(function(){
    var idSuj = document.getElementById('idSuj');
    $('#reply'+idSuj).click(function(e) {
        e.preventDefault()

});

La console de firefox me retourne ce message

Uncaught Error: Syntax error, unrecognized expression: #reply[object HTMLInputElement]

J'ai cherché, je n'est pas trouvé comment corriger cette erreur

Merci pour ton aide

delaville81 · Answer

Merci de ta réponse.

Je m'excuse de mon retour tardif.

J'ai fait comme indiqué, le commentaire est bien enregistré.

Je souhaite maintenant que la page soit mise à jour sans recharger la page (en JS où mes compétences sont plus que limitées)

Autre problème, dans ma page, j'ai d'autres formulaires de commentaires relatifs à d'autres topics.

Quand je rentre un commentaire sur le fernier topic posté, ca marche. Sur les autres topics plus anciens, ça ne fonctionne pas

Merci pour vos retours

delaville81 · Answer

J'ai enlevé le "echo" sur ajax_comment.php

delaville81 · Answer

Bonjour,

Oui c'est bien ce qui s'affiche lors du premier POST

Sur les autres, la console n'affiche rien, le button ne déclenche rien.

En ce qui concerne l'onglet réponse, en mettant un echo dans mon fichier PHP : ajax_comment.php, les variables postées sont bien affichées (dans le cas du premier POST).

Merci pour ton retour

jordane45 · Answer

Visiblement tu ne comprends pas mes questions ... Je te demande de DEPLIER la ligne >post ... afin d'accéder aux onglet REQUETE et REPONSE et de nous montrer le contenu de ces deux onglets). SI, sur les autres boutons, ça ne déclenche pas cette ligne .. c'est que ton souci se situe au niveau de ton JS et/ou à la façon dont tu appel ton code JS depuis ces boutons. Ce n'est plus un souci d'ajax à proprement parlé dans ce cas. PS: n'hésites pas non plus à mettre des console.log dans ton code JS pour voir si il rentre dedans et éventuellement le contenu de tes variables. Par exemple, juste en dessous de la ligne attachant le "click" à tes boutons : $('#reply'+idSuj).click(function(e) { console.log('Click sur le bouton ', idSuj ); e.preventDefault() D'ailleurs, plutôt que de mettre des ID à tes boutons .. il serait préférable (ça serait d'ailleurs LA solution à ton souci ) de passer par une class par exemple

Puis de cibler ces boutons via leur class comme ceci $('.btn-reply').click(function(e) { var idSuj = $(this).data('id'); // on récupère la valeur du data-attribut DATA-ID console.log('Click sur le bouton ', idSuj ); e.preventDefault()

delaville81 · Answer

Merci pour tes conseils avec une class. Ca cible parfaitement les sujets. SUPER

Mais par contre le problème d'affichage de la page avec le commentaire je ne sais pas comment le résoudre

Dans le premier cadre, c'est ce qui est présent dans la base. Dans le second c'est le formulaire de saisie du commentaire.

J'ai cliqué sur le bouton publier la page n'affiche toujours pas le commentaire dans le cadre avec le nom de l"utilisateur.

---------

Voici les deux captures demandées

jordane45 · Answer

Comme tu peux le voir .. l'onglet REPONSE de ton appel AJAX ne retourne rien...

Par conséquent.. comment penses tu récupérer les données que tu as transmis pour ensuite les intégrer dans ta page ?

A la limite, même sans réponse AJAX, tu peux utiliser les données que tu as utilisé pour les "envoyer" dans ton script ajax..  seulement voila.. ton code JS ne les utilises pas non plus pour générer le contenu à afficher...

..

Quel que soit les données que tu comptes utiliser ( celles envoyées dans ton ajax ... ou celles éventuellement retransmises en réponses de ton ajax ..) il va falloir compléter ton code JS

Il te manque quelques lignes de code ici :

if (xhr.status === 200) {
     console.log(xhr.responseText);
    // ICI ..  faire le traitement 
    // comme par exemple, générer une nouvelle DIV avec le contenu que tu 
    // souhaites afficher....
 }

delaville81 · Answer

Je désespère, je n'arrive à rien.

if (xhr.status === 200) {
     console.log(xhr.responseText);
    
 }

Je ne passe pas dedans donc aucun moyen de faire un traitement.

Rien dans l'onglet Réponse de la console donc pas d'affichage possible

J'ai essayé ça

xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
              console.log(xhr.responseText);           
          } else {
              console.log('Une erreur est survenue : ' + xhr.status);
          }
      });

Rien de plus.

J'arrête pour le WE, a voir lundi à tête reposée. Bon WE.

delaville81 · Answer

Bonjour,

Au chargement de la page

Après le click

$(document).ready(function(){
    $('.publier_com').click(function(e) {
      var idSuj = $(this).data('id'); // on récupère la valeur du data-attribut  DATA-ID
      console.log('Click sur le bouton ', idSuj );
      e.preventDefault()
 
      var formulaire = document.getElementById('formrep'+idSuj);
      var fileInput = document.getElementById('imgFile_'+idSuj);
      var formData = new FormData(formulaire);
      formData.append('file', fileInput.files[0]);
     
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'ajax_comment.php');  
      xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
              console.log(xhr.responseText);
          } else {
              console.log('Une erreur est survenue : ' + xhr.status);
          }
      });    
      xhr.send(formData); 
    });
});

delaville81 · Answer

re

$(document).ready(function(){
    $('.publier_com').click(function(e) {
      var idSuj = $(this).data('id'); // on récupère la valeur du data-attribut  DATA-ID
      console.log('Click sur le bouton ', idSuj );
      e.preventDefault()
 
      //var idMax = document.getElementById('idMax');
      var formulaire = document.getElementById('formrep'+idSuj);
      var fileInput = document.getElementById('imgFile_'+idSuj);
      var formData = new FormData(formulaire);
      formData.append('file', fileInput.files[0]);
     
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'ajax_comment.php');  
      xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
              console.log(xhr.responseText);
              document.getElementById('show').innerHTML = xhr.responseText; // Ajouter la réponse à la DIV
              document.getElementById('show').style.display = "block"; // Afficher la DIV
          } else {
              console.log('Une erreur est survenue : ' + xhr.status);
          }
      });    
      xhr.send(formData); 
    });
});

delaville81 · Answer

require '../connexion.php';//connexion à la base
include ('inc_blog.php');

$id_sujet = $_POST['id_sujet'];
    $texte_com = $_POST['texte_com'];
    include 'smiley_encode_com.php';
    $date_sujet = date("Y-m-d H:m:s");	
    $id_membre = $_POST['id_membre'];
    $timeStamp = time();
    $img_com = $_FILES['img_com'];

if (!empty($_FILES['img_com']['name'])) {                         
        $nom_fichier = $_FILES['img_com']['name'];					
        $ext         = explode('.', $nom_fichier);
        $ext         = strtolower($ext[count($ext) - 1]);
        $nom_md5     = md5($nom_fichier);
        $taille      = $_FILES['img_com']['size'];
        $type        = $_FILES['img_com']['type'];
        $tmp         = $_FILES['img_com']['tmp_name'];
        $chemin      = utf8_encode(stripslashes($nom_fichier));

$dossier="blog_com/".$id_membre.''.$timeStamp.".".$ext.""; 
        $dossier_thumb = "blog_com/";
        if(move_uploaded_file ($_FILES['img_com']['tmp_name'], $dossier)) {
            $img_com = $id_membre.''.$timeStamp.".".$ext;
                Com_tn::creer_thumb($dossier,$dossier_thumb,$img_com);
                $tn_img_com = 'tn_' .$img_com;			
        }
    }else{
        $img_com = '';	
        $tn_img_com = '';  
    }

$sql_insert = "INSERT INTO com_test (id_sujet, id_user, date, texte_com, img_com, tn_img_com) values (:id_sujet, :id_user, :date, :texte_com, :img_com, :tn_img_com)";
    $datas = array(':id_sujet'=>$id_sujet, ':id_user'=>$id_membre, ':date'=>$date_sujet, ':texte_com'=>$texte_com, ':img_com'=>$img_com, ':tn_img_com'=>$tn_img_com);
    try{
        $requete = $pdo->prepare($sql_insert);
        $requete->execute($datas);
        $last_id_com = $pdo->lastInsertId();
    }catch(Exception $e){
        // en cas d'erreur :
        echo " Erreur ! ".$e->getMessage();
        echo " Les datas : " ;
        print_r($datas);
    }

Problème JS/Ajax

13 réponses

Discussions similaires