Problème JS/Ajax
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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);
});
});
<form id="<?php echo 'formrep'.$suj['id_sujet']; ?>" method="POST" enctype="multipart/form-data">
<input type="hidden" id="idSuj" class="" name="id_sujet" value="<?php echo $suj['id_sujet']; ?>">
<input type="hidden" class="" name="id_membre" value="<?php echo $_SESSION['id_membre']; ?>">
<input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire...">
<a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
<input type="file" class="imgCom" id="imgFile_<?php echo $suj['id_sujet'];?>" name="img_com" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event,<?php echo $suj['id_sujet'];?>)">
<div class="img_com" id="divCom_<?php echo $suj['id_sujet'];?>">
<img src="" id="outputCom_<?php echo $suj['id_sujet'];?>" class="img-fluid" alt="">
<a class="btn_del" onclick="delFileCom(event,'<?php echo $suj['id_sujet'];?>')"><i class="fas fa-trash-alt del" id="trash_<?php echo $suj['id_sujet'];?>"></i></a>
</div>
<div>
<button type="button" name="reply" id="reply<?php echo $suj['id_sujet'];?>" form="<?php echo 'formrep'.$suj['id_sujet']; ?>" class="btn btn-primary btn-sm publier_com" >Publier</button>
</div>
</form>
Je n'arrive pas à récupérer en JS : $suj['id_sujet'] pour l'identification du <form> 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
<div class="ligne_top"></div>
<a id="last_subject"></a>
<div class="row">
<div class="col-12 col-sm-12 col-md-8">
<div class="post">
<?php
$req = 'SELECT suj.id_sujet, suj.id_user, suj.date, texte_sujet, img_sujet, tn_img_sujet,
membre.id_membre, photo, user.id_user, user.id_membre,
membre.nom, membre.nom_ep, membre.prenom
FROM sujet_test suj
INNER JOIN user ON suj.id_user = user.id_membre
INNER JOIN membre ON user.id_membre = membre.id_membre
ORDER BY suj.id_sujet DESC';
try{
$requet = $pdo->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'];
?>
<div class="card item">
<a id="suj<?php echo $id_sujet; ?>"></a>
<div class="card-header header_subject">
<div class="div_flex">
<div class="col-2 col-sm-1 col-md-1 img-user">
<img src="../admin/photo/<?php echo $suj['photo']; ?>" class="clipClass">
</div>
<div class="col-md-9 name_user">
<?php if($suj['nom_ep'] == ""){$nomEp = "";}else{$nomEp = $suj['nom_ep'].' ';} ?>
<span class="text_user"><?php echo $suj['prenom'].' '. $suj['nom'].' '.$nomEp;?></span><br />
<span class='text_date'><?php echo viewDate($suj['date']);?></span><br />
<?php if($suj['id_membre'] == $_SESSION['id_membre']){ ?>
<div id="divBtn<?php echo $id_sujet; ?>">
<span class="flex_align">
<a class="btn_edit" onclick="loadDiv(event,<?php echo $id_sujet; ?>)">
<img src="../img/b_edit.png" id="img_edit_del<?php echo $id_sujet; ?>" class="img_edit_del" alt="Modifier">
</a>
<?php if($nb_com == 0){ ?>
<form id="formdelSuj<?php echo $id_sujet; ?>" action="blog_test.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="id_sujet" id="<?php echo $id_sujet; ?>" value="<?php echo $id_sujet; ?>">
<input type="submit" form="formdelSuj<?php echo $id_sujet; ?>" class="ico_supp" name="delSuj" value="" onclick="if(!confirm('Etes-vous sûr de vouloir supprimer le sujet ?')) return false;">
</form>
<?php } ?>
</span>
</div>
<div id="divBtnClose<?php echo $id_sujet; ?>" class="divBtnClose">
<span class="flex_align">
<a class="btn_close" onclick="closeDiv(event,<?php echo $id_sujet; ?>)">
<img src="../img/b_edit.png" id="img_close_div<?php echo $id_sujet; ?>" class="img_edit_del" alt="Modifier">
</a>
<?php if($nb_com == 0){ ?>
<form id="formdelSuj<?php echo $id_sujet; ?>" action="blog_test.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="id_sujet" id="<?php echo $id_sujet; ?>" value="<?php echo $id_sujet; ?>">
<input type="submit" form="formdelSuj<?php echo $id_sujet; ?>" class="ico_supp" name="delSuj" value="" onclick="if(!confirm('Etes-vous sûr de vouloir supprimer le sujet ?')) return false;">
</form>
<?php } ?>
</span>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="body_padding" id="div<?php echo $id_sujet;; ?>">
<div class="div_flex">
<div class="col-2 col-sm-1 col-md-1"></div>
<div class="card_text col-10 col-sm-10 col-md-11">
<?php
echo "<div class='card_text'>";
echo nl2br($text);
echo "</div>";
if(!empty($img_sujet)){?>
<div class="">
<a href="blog/<?php echo $img_sujet; ?>" target="_blank">
<?php echo '<img src="blog/'.$tn_img_sujet.'" class="img-fluid">';?>
</a>
<input type="hidden" name="sujImg" id="sujImg<?php echo $id_sujet; ?>" value="<?php echo $img_sujet; ?>">
</div>
<?php } ?>
</div>
</div>
</div>
<div class="body_padding div_mod" id="div_edit<?php echo $id_sujet; ?>">
<?php
$idForm = "formsub".$id_sujet;
$actionForm = "blog_test.php#suj".$id_sujet;
if(!empty($img_sujet)){$src = 'blog/'.$tn_img_sujet;}else{$src = "#";}
?>
<div class="div_flex">
<div class="col-2 col-sm-1 col-md-1"></div>
<div class="card_text col-10 col-sm-10 col-md-11">
<form id="<?php echo $idForm; ?>" action="<?php echo $actionForm; ?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="id_membre" id="id_membre<?php echo $id_sujet; ?>" value="<?php echo $_SESSION['id_membre']; ?>">
<input type="hidden" name="id_sujet" id="<?php echo $id_sujet; ?>" value="<?php echo $id_sujet; ?>">
<input type="hidden" name="sujFile" id="sujFile<?php echo $id_sujet; ?>" value="<?php echo $img_sujet; ?>">
<textarea class="textarea-subject" name="subject" id="subject<?php echo $id_sujet; ?>" rows="3"><?php echo $text; ?></textarea>
<a class="btn_input"><i class="far fa-image" id="ico_image<?php echo $id_sujet; ?>"></i><span class="name">Photos</span></a>
<input type="file" name="img_sujet" id="img_sujet<?php echo $id_sujet; ?>" value="" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileEdit(event,<?php echo $id_sujet; ?>)">
</div>
<div class="image<?php echo $id_sujet; ?>" id="image<?php echo $id_sujet; ?>">
<a href="blog/<?php echo $img_sujet; ?>" id="linkSuj<?php echo $id_sujet; ?>" target="_blank">
<img src="<?php echo $src; ?>" id="output<?php echo $id_sujet; ?>" class="img-fluid" alt=""><br />
</a>
<input type="hidden" name="sujImage" id="sujImage<?php echo $id_sujet; ?>">
<a class="btn_del" onclick="delFileEdit(event,<?php echo $id_sujet; ?>)"><i class="fas fa-trash-alt ico_trash" id="trashEdit<?php echo $id_sujet; ?>"></i></a>
</div>
<div>
<input type="submit" form="<?php echo $idForm; ?>" name="editSuj" id="editSuj<?php echo $id_sujet; ?>" class="btn btn-primary btn-sm publier" value="Publier">
</div>
</form>
</div>
</div>
</div>
<div class="ligne_top"></div>
<div>
<?php
$req_com = 'SELECT id_com, id_sujet, com.id_user, com.date, texte_com, img_com, tn_img_com, membre.id_membre, photo, user.id_user, user.id_membre,
membre.nom, membre.nom_ep, membre.prenom
FROM com_test com
INNER JOIN user ON com.id_user = user.id_membre
INNER JOIN membre ON user.id_membre = membre.id_membre
WHERE id_sujet = :id_sujet
ORDER BY id_com ASC';
$data = array(':id_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'];
?>
<a id="com<?php echo $com['id_com'] ?>"></a>
<div class="com_show div_flex">
<div class="col-2 col-sm-1 col-md-1 img-user">
<img src="../admin/photo/<?php echo $com['photo']; ?>" class="clipClass">
</div>
<div class="col-md-10" id="div_com<?php echo $id_com; ?>">
<?php if($com['nom_ep'] == ""){$nomEp = "";}else{$nomEp = $com['nom_ep'].' ';} ?>
<div class="text_com_name">
<div class="bloc_edit">
<div>
<span class="text_user"><?php echo $com['prenom'].' '. $com['nom'].' '.$nomEp; ?></span>
</div>
<div>
<?php if($com['id_membre'] == $_SESSION['id_membre']){ ?>
<div id="divBtnCom<?php echo $id_com; ?>">
<span class="flex_align">
<a class="btn_edit" onclick="loadDivCom(event,<?php echo $id_com; ?>)">
<img src="../img/b_edit.png" id="img_edit_del<?php echo $id_com; ?>" class="img_edit_del" alt="Modifier">
</a>
<form id="formdelCom<?php echo $id_com; ?>" action="blog_test.php#suj<?php echo $suj['id_sujet']; ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="id_com" id="<?php echo $id_com; ?>" value="<?php echo $id_com; ?>">
<input type="submit" form="formdelCom<?php echo $id_com; ?>" class="ico_supp" name="delCom" value="" onclick="if(!confirm('Etes-vous sûr de vouloir supprimer')) return false;">
</form>
</span>
</div>
<?php } ?>
</div>
</div>
<span class="text_com"><?php echo $com['texte_com']; ?></span>
</div>
<?php if($img_com_show != '' && $img_com_show != 'Array'){ ?>
<div class="img_rep">
<a href="blog_com/<?php echo $img_com_show; ?>" target="_blank">
<?php echo '<img src="blog_com/'.$tn_img_com_show.'" class="img-fluid">'; ?>
</a>
<input type="hidden" name="inputImg" id="inputImg<?php echo $id_com; ?>" value="<?php echo $img_com_show; ?>">
</div>
<?php } ?>
</div>
<div class="col-md-10 div_coment div_com_edit" id="div_com_edit<?php echo $id_com; ?>">
<?php if($com['nom_ep'] == ""){$nomEp = "";}else{$nomEp = $com['nom_ep'].' ';}
if($img_com_show != '' && $img_com_show != 'Array'){
$srcEditCom = "blog_com/".$tn_img_com_show;
}else{
$srcEditCom = '#';
}
?>
<form id="<?php echo "form".$id_com; ?>" name="<?php echo "form".$id_com; ?>" action="blog_test.php#com<?php echo $id_com; ?>" method="post" enctype="multipart/form-data">
<div>
<input type="hidden" name="id_membre" id="id_membre<?php echo $id_com; ?>" value="<?php echo $_SESSION['id_membre']; ?>">
<input type="hidden" name="id_com" id="<?php echo $id_com; ?>" value="<?php echo $id_com; ?>">
<input type="hidden" name="nameFile" id="nameFile<?php echo $id_com; ?>" value="<?php echo $img_com_show; ?>">
<span class="text_com_edit">
<input type="text" class="coment" name="texte_com" value="<?php echo $com['texte_com']; ?>">
</span>
<a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
<input type="file" class="imgCom" id="imgFileCom<?php echo $id_com; ?>" name="img_com_edit" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileComEdit(event,<?php echo $id_com; ?>)">
<div class="" id="divComEdit<?php echo $id_com; ?>">
<a href="blog_com/<?php echo $img_com_show; ?>" target="_blank">
<img src="<?php echo $srcEditCom; ?>" id="outputEdit<?php echo $id_com; ?>" class="img-fluid">
</a>
<input type="hidden" name="inputImage" id="inputImage<?php echo $id_com; ?>">
<a class="btn_del" onclick="delFileComEdit(event,'<?php echo $id_com; ?>')"><i class="fas fa-trash-alt" id="trashEditCom<?php echo $id_com; ?>"></i></a>
</div>
</div>
<div>
<input type="submit" name="editCom" id="editCom<?php echo $id_com ;?>" form="<?php echo "form".$id_com ; ?>" class="btn btn-primary btn-sm publier_com" value="Publier">
</div>
</form>
<?php if($com['id_membre'] == $_SESSION['id_membre']){ ?>
<div id="divBtnCloseCom<?php echo $id_com; ?>" class="divBtnClose">
<span class="flex_align">
<a class="btn_close" onclick="closeDivCom(event,<?php echo $id_com; ?>)">
<img src="../img/b_edit.png" id="img_close_div<?php echo $id_com; ?>" class="img_edit_del" alt="Modifier">
</a>
<form id="formdelCom<?php echo $id_com; ?>" action="blog_test.php#suj<?php echo $suj['id_sujet']; ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="id_com" id="<?php echo $id_com; ?>" value="<?php echo $id_com; ?>">
<input type="submit" form="formdelCom<?php echo $id_com; ?>" class="ico_supp" name="delCom" value="" onclick="if(!confirm('Etes-vous sûr de vouloir supprimer')) return false;">
</form>
</span>
</div>
<?php } ?>
</div>
</div>
<?php }
}catch(Exception $e){
echo " Erreur ! ".$e->getMessage();
echo " Les datas : " ;
print_r($data);
}
?>
</div>
<div>
<div class="com div_flex div_comment">
<div class="col-2 col-sm-1 col-md-1 img-user">
<img src="<?php echo avatar($_SESSION['id_membre']); ?>" class="clipClass">
</div>
<div class="col-md-10 div_coment">
<?php
$formrep = 'formrep'.$suj['id_sujet'];
?>
<form id="<?php echo 'formrep'.$suj['id_sujet']; ?>" method="POST" enctype="multipart/form-data">
<input type="hidden" id="idSuj" class="" name="id_sujet" value="<?php echo $suj['id_sujet']; ?>">
<input type="hidden" class="" name="id_membre" value="<?php echo $_SESSION['id_membre']; ?>">
<input type="text" class="coment" name="texte_com" value="" placeholder="Votre commentaire...">
<a class="btn_input"><i class="far fa-image "></i><span class="name">Photos</span></a>
<input type="file" class="imgCom" id="imgFile_<?php echo $suj['id_sujet'];?>" name="img_com" lang="fr" accept=".jpg,.jpeg,.gif,.png" onchange="loadFileCom(event,<?php echo $suj['id_sujet'];?>)">
<div class="img_com" id="divCom_<?php echo $suj['id_sujet'];?>">
<img src="" id="outputCom_<?php echo $suj['id_sujet'];?>" class="img-fluid" alt="">
<a class="btn_del" onclick="delFileCom(event,'<?php echo $suj['id_sujet'];?>')"><i class="fas fa-trash-alt del" id="trash_<?php echo $suj['id_sujet'];?>"></i></a>
</div>
<div>
<button type="button" name="reply" id="reply<?php echo $suj['id_sujet'];?>" form="<?php echo 'formrep'.$suj['id_sujet']; ?>" class="btn btn-primary btn-sm publier_com" >Publier</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="ligne_top"></div>
<div class="ligne_top"></div>
<?php } ?>
</div>
</div>
</div>
Merci d'avance pour votre aide
Je m'arrache vraiment les cheveux
Macintosh / Chrome 112.0.0.0
- Problème JS/Ajax
- Js arrondir - Forum Webmastering
- Yggtorrent erreur ajax ✓ - 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 Windows
- Arrondi js ✓ - Forum Windows
- Remplir une case de tableau avec une couleur grise avec texture de pointillés ✓ - Forum Photoshop
13 réponses
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
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
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.
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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()
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
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....
}
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.
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 !
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);
});
});
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
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);
});
});
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);
}
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 !!");
}
