salut tout le monde

voilà j'ai terminé mon système de réponse de commentaire et compagnie et je souhaite améliorer

lorsqu'on clique sur répondre j'ai un focus sur mon textarea et j'aimerais affiché automatiquement, dans mon textarea "bonjour {pseudo de l'autheur du message d'origine}

Exemple de commentaire:

commentaire de jacques: Bonjour, toujours dispo ?

réponse: Bonjour Jacques, ..... (on ecrit ensuite son message),

L'essentiel de mon code PHP et le coté ajax

 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading"><b>'.$row["comment_sender_name"].'</b> on <i>'.$diff.'</i></div>
  <div class="panel-body">'.$row["comment"].'</div>
  <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Répondre</button></div>
 </div>
 ';
 $output .= get_reply_comment($connect, $row["comment_id"]);
}

echo $output;

function get_reply_comment($connect, $parent_id = 0, $marginleft = 0)
{


 // Récuératipn des commentaires selon l'id du post (cas de réponse à un comm)
 $query = "SELECT * FROM tbl_comment INNER JOIN membres ON tbl_comment.commentaire_membre_id = membres.id_membre WHERE parent_comment_id = '".$parent_id."' ";
 $output = '';
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $count = $statement->rowCount();
 if($parent_id == 0)
 {
  $marginleft = 0;
 }
 else
 {
  $marginleft = $marginleft + 48;
 }
 if($count > 0)
 {
  foreach($result as $row)
  {
   $output .= '
   <div class="panel panel-default" style="margin-left:'.$marginleft.'px">
    <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> on <i>'.$row["date"].'</i></div>
    <div class="panel-body">'.$row["comment"].'</div>
    <div class="panel-footer" align="right"><button type="button" class="btn btn-default reply" id="'.$row["comment_id"].'">Répondre</button></div>
   </div>
   ';
   $output .= get_reply_comment($connect, $row["comment_id"], $marginleft);
  }
 }
 return $output;
}

?>

et le js permettant de répondre et repartir sur le focus de textarea:

   <script>
$(document).ready(function(){
 
 $('#comment_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_comment.php",
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#comment_form')[0].reset();
     $('#comment_message').html(data.error);
     $('#comment_id').val('0');
     load_comment();
    }
   }
  })
 });

 load_comment();

 function load_comment()
 {
  $.ajax({
   url:"fetch_comment.php",
   method:"POST",
   success:function(data)
   {
    $('#display_comment').html(data);
   }
  })
 }

 $(document).on('click', '.reply', function(){
  var comment_id = $(this).attr("id");
  $('#comment_id').val(comment_id);
  $('#comment_name').focus();
 });
 
});
</script>

Bonjour,

Dans le code que tu nous présentes, je ne vois pas vraiment où est le textearea.

Ceci dit, rien de plus simple pour afficher le pseudo dans le cadre du textarea(et pas besoin du js pour celà). Il suffit de le mettre avec le texte que tu veux entre les balises <textarea></textarea> de ton formulaire.

A toi

-
Edité par CarréDas1 3 février 2023 à 5:46:02

Bonjour,

Je suppose qu'il veut que ce soit dynamique sans rafraîchir la page d'où l'usage du js.

Ceci dit pour mettre un texte dans le textarea il suffit de récupérer l'élément et de lui faire un innerText me semble t-il.

Ma petite marotte : pourquoi utiliser jquery qui est une surcouche de js et qui n'est plus vraiment utile de nos jours.

le $.ajax se remplace par l'api fetch et pour le reste c'est aussi simple et parfois plus lisible directement en js.

https://developer.mozilla.org/fr/docs/Web/API/Fetch_API

A+

-
Edité par monkey3d 3 février 2023 à 7:33:23

Hello,

Il y aurai des choses à revoir dans le code avant de commencer comme l'utilisation de rowCount sur une requête select, jquery, le php qui renvoie du html en entier (ce n'est pas facilement utilisable après coup et surtout en dehors du web).

Dans l'idée :

<?php

$db = new PDO('mysql:host=localhost;dbname=forum_ocr', 'root', 'root');
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

function getReccursiveComments(PDO $db, int $parentId = 0): array
{
    $query = $db->prepare('SELECT id, parent_id, author_id, member.name, content, created_at
        FROM comment INNER JOIN member ON member.id = comment.author_id
        WHERE parent_id = :parentId');
    $query->execute([':parentId' => $parentId]);

    $comments = [];
    foreach ($query as $comment) {
        $comment = [
            'id' => $comment['id'],
            'parent_id' => $comment['parent_id'],
            'author' => [
                'id' => $comment['author_id'],
                'name' => $comment['name'],
            ],
            'content' => $comment['content'],
            'created_at' => new DateTimeImmutable($comment['created_at']),
            'children' => getReccursiveComments($db, $comment['id']),
        ];

        $comments[] = $comment;
    }

    return $comments;
}

header('Content-Type: application/json');

echo json_encode(getReccursiveComments($db));

Et le js qui serait dans un fichier :

async function getComments() {
  // Pas besoin de jQuery, on utilise fetch
  // Pas besoin d'une requête POST, on utilise GET
  const response = await fetch("/comments.php")
  return await response.json()
}

const commentForm = document.querySelector("#comment-form")

function displayReccursiveComments(comments, parentEl) {
  comments.forEach((comment) => {
    const commentElement = document.createElement("div")

    const authorElement = document.createElement("h4")
    authorElement.textContent = comment.author.name
    commentElement.append(authorElement)

    const contentElement = document.createElement("p")
    contentElement.textContent = comment.content
    commentElement.append(contentElement)

    const replyButton = document.createElement("button")
    replyButton.textContent = "Répondre"
    replyButton.addEventListener("click", () => {
      commentForm.querySelector("input[name=parent_id]").value = comment.id
      commentForm.querySelector("textarea").focus()
      commentForm.querySelector("textarea").value = `@${comment.author.name} `
    })
    commentElement.append(replyButton)

    if (comment.children.length > 0) {
      const repliesElement = document.createElement("div")

      const repliesTitle = document.createElement("h3")
      repliesTitle.textContent = "Réponses"
      repliesElement.append(repliesTitle)

      displayReccursiveComments(comment.children, repliesElement)
      commentElement.append(repliesElement)
    }
  })
}

function init() {
  getComments().then((comments) => {
    displayReccursiveComments(comments, document.querySelector("#comments"))
  })
}

init()

Fais rapidement et pas tester mais c'est pour le principe.