Problème JS/Ajax
Ferméjordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 - 16 mai 2023 à 19:20
- Problème JS/Ajax
- Arrondi js ✓ - Forum Windows
- Arrondir js - Forum Webmastering
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Pixlr - Forum Graphisme
- Reproduction d'un dessin - Forum Graphisme
13 réponses
6 mai 2023 à 01:55
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
6 mai 2023 à 19:17
Voici mon code modifié
$(document).ready(function(){ 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); }); });
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
Modifié le 6 mai 2023 à 20:01
Avec cette ligne
var idSuj = document.getElementById('idSuj');
Tu cibles un élément HTML ( en l'occurence, ici, un INPUT )
Pour avoir sa "valeur" .. il faut le faire via son attribut VALUE
Donc, ta ligne devrait être
var idSuj = document.getElementById('idSuj').value;
par contre, faudra que tu m'expliques pourquoi tu sembles utiliser du jquery pour certaines choses ( la détéction du click sur tes bouton ...) .. mais pas pour le reste ( le ciblage des éléments.... l'ajax .... )
Donc, ta ligue en jquery devient :
var idSuj = $('#idSuj').val();
Soit tu écris tout en "pure" javascript ... soit en jquery... ça ne sert à rien de mélanger.
Et vu que tu sembles débuter, je pense que d'utiliser que jquery te serait bénéfique et évitera un certain nombre d'erreurs dans la console JS....
PS: quand tu as des messages d'erreur dans la console.. ça t'indique le fichier concerné et surtout.. le numéro de ligne. il serait bien de nous les transmettre quand tu veux demander de l'aide. ça permettra de "trouver" plus rapidement où se situe le souci.
9 mai 2023 à 16:14
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
9 mai 2023 à 16:19
Et ton fermier... il a des poules ? :-)
Plus sérieusement ... lors de ton appel ajax, (dans la console de ton navigateur), tu as quoi au niveau de la requête ?
9 mai 2023 à 16:33
9 mai 2023 à 18:52
il faut déplier cette ligne... puis nous montrer le contenu de son onglet "requête" .. et celui de l'onglet "réponse"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question9 mai 2023 à 19:00
9 mai 2023 à 20:11
Là c'est dans un cas où ca fonctionne correctement ? (Le premier post ?)
Si oui, qu'as tu quand ça ne marche pas ?
Et puis, tu ne nous a toujours pas montré l'onglet réponse de cette requête AJAX.
10 mai 2023 à 16:33
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
10 mai 2023 à 18:51
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
<div> <button type="button" name="reply" class="btn-reply" data-id="<?php echo $suj['id_sujet'];?>" form="<?php echo 'formrep'.$suj['id_sujet']; ?>" class="btn btn-primary btn-sm publier_com" >Publier</button> </div>
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()
11 mai 2023 à 18:57
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
11 mai 2023 à 19:14
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.... }
12 mai 2023 à 16:56
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.
12 mai 2023 à 17:02
Est-ce que tu vois toujours l'affichage du console que je t'avais ajouté dans ta fonction ?
console.log('Click sur le bouton ', idSuj );
Qu'est-ce qu'il affiche ?
Et puis.. vois tu l'appel AJAX dans la console ?
Si la réponse est non.. as tu d'autres messages qui s'y affichent ?
A un moment, il serait bien que tu nous postes des captures écran de ta console au chargement de la page .. puis APRES le click sur ton bouton ...
Sans ça.. impossible de t'aider !
16 mai 2023 à 16:59
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); }); });
16 mai 2023 à 17:06
Donc,
On voit bien le console.log qui indique que tu as cliqué sur le bouton "6"
On voit bien que ça déclenche un appel AJAX, qui envoi, entre autres choses, l'id_sujet = 6
Par contre..... encore une fois .... tu ne nous as toujours pas montré le contenu de l'onglet REPONSE de ton appel ajax....
A croire que tu t'y refuses... mais le pourquoi..ça ça reste un mystère....
A noter que, si l'onglet REPONSE est "vide" .... assure toi de cliquer sur le bouton "réponse brut" histoire de bien voir les éventuelles erreurs PHP qui s'y trouveraient.
Je constate également que tu n'as toujours pas modifié ton CODE JS pour y mettre le "traitement" de la réponse .. tel que je te l'avais expliqué dans ma réponse 13 : https://forums.commentcamarche.net/forum/affich-37843425-probleme-js-ajax#13
16 mai 2023 à 17:39
16 mai 2023 à 17:40
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); }); });
16 mai 2023 à 18:02
Visiblement le souci se situe au niveau du code PHP appelé par ton script Ajax.
Il faudrait nous le montrer
16 mai 2023 à 19:03
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); }
16 mai 2023 à 19:20
Heuuu;.........
Ton code PHP ne retourne rien ... c'est donc normal qu'il n'y ait rien dans l'onglet REPONSE .........
....
Bref.. tout est donc normal...
On en revient donc à ma réponse 13
if (xhr.status === 200) { console.log(xhr.responseText); // n'affiche rien car il n'y a rien à afficher ! console.lg(" Insertion en BDD OK !" ); // ICI .. faire le traitement // comme par exemple, générer une nouvelle DIV avec le contenu que tu // souhaites afficher.... alert("a toi de coder le JS pour ajouter les infos dans ta page !"); alert("La question est donc résolue !!"); }