Problème JS/Ajax

Fermé
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024 - 5 mai 2023 à 16:24
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

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


13 réponses

jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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


0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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.

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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 ?

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
9 mai 2023 à 16:33

0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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"

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
9 mai 2023 à 19:00

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


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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.

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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()
0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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....
 }

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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.


0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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 !

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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); 
    });
});

0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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

0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737 > 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 à 17:39
0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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); 
    });
});

0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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

0
delaville81 Messages postés 196 Date d'inscription jeudi 6 novembre 2008 Statut Membre Dernière intervention 2 juin 2024
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);
    } 

0
jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 737
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 !!");
 }
0