Discussion :

[Smlh.dev]

Bonjour, je viens solliciter votre aide, je souhaite récupérer le dernier commentaire insérer pour pouvoir l'afficher sans recharger ma page. Mais sa me retourne toujours NULL, sauf que lorsque je regarde dans la partie network dans l'onglet response ma réponse est présente.

Routeur :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
($_GET['url'] === 'postComment') {
                    if (isset($_GET['postId']) AND !empty($_GET['postId'])) {
                        if (!empty($_POST['author']) AND !empty($_POST['contents'])) {
                            $this->_frontController->postComment($_GET['postId'], $_POST['contents'], $_POST['author']);
                        }

Contrôleur :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 public function postComment($postId, $contents, $author)
    {
        $comments = $this->_comment->addCommentFromPost($postId, $contents, $author);
        echo json_encode(require './View/displayCommentsView.php');
        // require './View/displayCommentsView.php';
    }

AJAX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.getElementById("commentForm").addEventListener("submit", function (event) {
 
	event.preventDefault(); 
 
	let dataForm = new FormData(this);
 
	const xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function () {
		if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
			console.log(this);
			let result = this.response;
			comments(result);
		}
	};
	xhr.open("POST", this.action, true);
	xhr.responseType = "json";
	xhr.send(dataForm);
});
 
 
function comments(resultAjax) {
	let div = document.getElementsByClassName("displayComments");
	console.log(resultAjax);
 
}

[Toufik83]

Bonjour,

Mais sa me retourne toujours NULL, sauf que lorsque je regarde dans la partie network dans l'onglet response ma réponse est présente.

Les variables dans l'onglet network sont celles qui ont été envoyées et pas reçues, donc la première étape est de vérifier le scipt js et utiliser des console.log et surtout voir l'onglet console aussi.

Modifies un peu La ligne 10 du code js console.log("Response ajax :",this.response);, ça donne quoi ?

Après quand je vois ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$comments = $this->_comment->addCommentFromPost($postId, $contents, $author);
 echo json_encode(require './View/displayCommentsView.php');

Je me demande pourquoi le require dans json_encode ? et quel est le contenu de displayCommentsView.php ?

J'imagine que le traitement de addCommentFromPost() ressemble un peu à ceci :

• exécution de la requête d’insertion...
• récupérer le dernier id inséré...
• si tout est bon, récupérer l'objet inséré en fonction du dernier id et le retourner avec return array("id"=>"id du comment","titre"=>"titre comment","date"=>"date de comment");, sinon retourne une erreur genre return array("erreurInsert"=>"Aucune insertion ....");

Donc $comments doit être l'objet qui vient d'être insérer par la méthode addCommentFromPost() (ou une erreur) pour qu'ensuite le passer en paramètre dans json_encode directement comme ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
   echo json_encode($comments);

.

[Smlh.dev]

Bonjour, Merci pour ta réponse.

Pour le console log à la ligne 10 du code JS ça m'affiche NULL.

Mon displayCommentFromPost ressemble à ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
 
while($comment = $comments->fetch()) {
 
?>
    <div class="displayComments">
        <p class="author"><?= htmlspecialchars($comment['pseudo']); ?></p>
        <p class="content"><?= htmlspecialchars($comment['contents']); ?></p>
        <p class="created_at"><?= htmlspecialchars($comment['creation_date']); ?></p>
    </div>
<?php
 
}
 
$comments->closeCursor();
 
?>

et le addCommentFromPost à ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public function addCommentFromPost($postId, $contents, $author) {
        $pdo = $this->getConnection();
        $result = $pdo->prepare('INSERT INTO comments(pseudo, contents, id_post, creation_date) VALUES(:pseudo, :contents, :id_post, NOW())');
        $result = $result->execute(array(
            'pseudo' => $author,
            'contents' => $contents,
            'id_post' => $postId
        ));
        $commentId = $pdo->lastInsertId();
        $comment = $pdo->prepare('SELECT id,pseudo,contents,creation_date FROM comments WHERE id= ?');
        $comment->execute([$commentId]);
        return $comment;
 
    }

Lorsque je fais un echo json_encode($comments); j'ai toujours null dans la console et dans le network ça m'affiche ma requête SELECT.

le require dans le json_encode que j'ai effectué c'était pour récupérer la div que contient mon fichier displayCommentsView.php pour pouvoir l'insérer avec javascript par la suite.

[Toufik83]

Bonjour,

tu te complique la tâche plus qu'elle l'est, commence d'abord par modifier la dernière partie du code de la méthode addCommentFromPost :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
public function addCommentFromPost(...){
....
$commentId = $pdo->lastInsertId();
$comment = $pdo->prepare('SELECT id,pseudo,contents,creation_date FROM comments WHERE id= ?');
$comment->execute([$commentId]);
return $commentId>0
         ?$comment->fetch(PDO::FETCH_ASSOC)
         :array("erreurInsert"=>"Aucune insertion n'a été effectuée.");
}

Après tu modifies la méthode postComment comme ça :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 public function postComment($postId, $contents, $author)
    {
        $comments = $this->_comment->addCommentFromPost($postId, $contents, $author);
        echo json_encode($comments);
    }

Puis tu manipules les données au niveau js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
xhr.onreadystatechange = function() {
	if (this.readyState == 4) { // `DONE`
		if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
			if(this.response) {
                             console.log('Succès :',this.response);
                             comments(this.response);
                        }
			else console.error("Une erreur s'est produite lors de l'insertion.");
		}
	}
}

Que vois-tu dans la console du navigateur après ces modifications ?

[Smlh.dev]

Bonjour,

Ah oui d'accord merci beaucoup là j'ai bien le retour dans ma console avec le dernier commentaire insérer et je comprends mieux ou été mon erreur.