Afficher un commentaire posté en JS/AJAX
delaville81
Messages postés
195
Date d'inscription
Statut
Membre
Dernière intervention
-
delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention -
delaville81 Messages postés 195 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai crée un blog. Dans ce dernier on peut créer des sujets et réagir en écrivant des commentaire.
Dans mon formulaire quand je clique sur publier, l'AJAX fonctionne et met bien à jour ma base de données mais le commentaire (dans la liste sous le sujet) ne s'affiche pas je reste sur mon imput.
Je souhaiterai faire comme dans comment ça marche (ce site) lorsqu'on post un 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" onclick="send_com(<?
php echo $suj['id_sujet'];?>)">Publier</button>
</div>
</form>
function send_com(idSuj) {
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);
}
Merci d'avance pour vos retours
Macintosh / Chrome 112.0.0.0
A voir également:
- Afficher un commentaire posté en JS/AJAX
- Commentaire word - Guide
- Afficher appdata - Guide
- Vente la poste mobile - Accueil - Opérateurs & Forfaits
- Afficher google en page d'accueil - Guide
- Afficher taille dossier windows - Guide
3 réponses
Bonjour
Une fois que tu as envoyé les données dans la base, il faut afficher le résultat dans la page
Là.. ton code n'affiche rien du tout.
Il faut donc que tu crées dans ta page un élément HTML qui va recevoir le contenu de ce que tu veux afficher
<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 = '.$suj['id_sujet'].'
ORDER BY id_com ASC';
$pdo->exec('SET NAMES utf8');
$resu = $pdo->query($req_com);
while($com = $resu->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 } ?>
</div>
$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'];
<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>
}catch(Exception $e){
echo " Erreur ! ".$e->getMessage();
echo " Les datas : " ;
print_r($data);
}