如何显示要编辑的特定行的注释？

Question

这是一个使用 jQuery、Ajax、PHP、MySQL 和 HTML 的评论系统。 当我单击编辑按钮时，它显示的是 MySQL 表的第一行的注释，而不是我选择的行。 但是，一旦我编辑它，它就会更正正确的行。 我想不出一种方法来显示我要编辑的行的注释。

我可以将行的正确 comment_id 显示到 textarea 中，但它会将第一行的注释显示到 textarea 中。

下面是测试用例代码：

MySQL 表有两行： comment_id作为主行， comment作为文本。 我将数据库命名为：testcaseedit_db，将表命名为：tbl_comment。

索引.php

<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>

<div id="display_comment"></div>
<div id="comment_message"></div>

<div id="display_edit"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {


let count = 0;

$(document).on('click change', '.edit, .submit', function(e) {

  if ($(this).is('.edit')) {

    var comment_id = $(this).attr("id");
    $('#comment_id').val(comment_id);

    var closestDiv = $('button').closest('div.panel'); 
    $('.div.panel').not(closestDiv.next('.div.panel')).hide();
    closestDiv.next('div.panel').slideToggle(100);

    var commentEdit = $('#display_comment').find('#editable').html(); 

  ++count;

  const htmlString = 
  `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">

    <div class="input-group-prepend">
      <textarea name="comment" id="comment${count}" class="form-control" rows="30" cols="160"> 
        ${commentEdit} ${comment_id} 
      </textarea>
    </div>

    <div class="input-group-prepend">
     <input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />
     <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />
    </div>
  </form>`;


  $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);



    } else if ($(this).is('.submit')) {

    $.ajax({
     url:"edit.php",
     method:"POST",
     data: new FormData(this),
     contentType: false,
     processData: false,
     success:function(data)
     {
      if(data.error != '') {
       $('#comment_form')[0].reset();
       $('#comment_id').val(comment_id);
       $('#comment').val(comment);
      }
     }
    });

   location.reload();

      $(this).closest('form').submit();
      e.stopPropagation();
    } else {
      return false;
    }

});

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

 load_comment();


// End of (document).ready(function){}
}); 
</script>


 </body>
</html>

获取.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$query = "
SELECT * FROM tbl_comment WHERE comment_id = comment_id
";

$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';

foreach($result as $row) {
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>
  <div class="panel-body"><b> Comment: </b> <br> <span id="editable">  '.$row["comment"].'  </span> </div>
  <div class="panel-footer" align="right">

  <button type="button" class="btn btn-default edit" id="'.$row["comment_id"].'">Edit</button>

  </div>
 </div>
 ';
}


echo $output;

?>

编辑.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$comment_id = $_POST["comment_id"];
$comment = $_POST["comment"];

if ( $error == '' && !empty($_POST["comment"]) ) {


 $query = "UPDATE tbl_comment SET comment = :comment WHERE comment_id = :comment_id ";

 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':comment_id' => $comment_id,
   ':comment'    => $comment
  )
 );

  header("Location: index.php");

} 

$data = array(
 'error'  => $error
);

echo $error;

?>

Answer 1

这是解决方案：

在 fetch.php 文件中，我将每个变量的 id 放入一个数组中，如下所示：

<button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'" id[2]="'.$row["comment"].'">Edit</button>

在 index.php 文件中，我抓取了每个变量的值，如下所示：

    var comment_id = $(this).attr("id[1]");
    $('#comment_id').val(comment_id);

    var comment = $(this).attr("id[2]");
    $('#comment').val(comment);

然后我在 textarea 中显示了 comment 变量，如下所示：

<textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120">${comment}</textarea>

这是 index.php 和 fetch.php 的完整代码。 我留下了 edit.php 不变：

索引.php

<?php $connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', ''); ?>

<div id="display_comment"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

let count = 0;

$(document).on('click change', '.edit, .submit', function(e) {

  if ($(this).is('.edit')) {

    var comment_id = $(this).attr("id[1]");
    $('#comment_id').val(comment_id);

    var comment = $(this).attr("id[2]");
    $('#comment').val(comment);


    var closestDiv = $('button').closest('div.panel'); 
    $('div.panel').not(closestDiv.next('div.panel')).hide();
    closestDiv.next('div.panel').slideToggle(100);

  ++count;

  const htmlString = 
  `<form id="comment_form${count}" class="input-group form-row" action="edit.php" method="post" enctype="multipart/form-data">

    <div class="input-group-prepend">
      <textarea name="comment" id="comment${count}" class="form-control" rows="15" cols="120"> 
        ${comment}
      </textarea>
    </div>

    <div class="input-group-prepend">
     <input type="hidden" name="comment_id" id="comment_id" value="${comment_id}" />
     <input type="submit" name="submit" id="submit" class="submit btn btn-info" value="Save" form="comment_form${count}" />
    </div>
  </form>`;

  $('#display_comment')[0].insertAdjacentHTML('afterend', htmlString);

    } else if ($(this).is('.submit')) {

    $.ajax({
     url:"edit.php",
     method:"POST",
     data: new FormData(this),
     contentType: false,
     processData: false,
     success:function(data)
     {
      if(data.error != '') {
       $('#comment_form')[0].reset();
       $('#comment_id').val(comment_id);
       $('#comment').val(comment);
      }
     }
    });

   location.reload();

      $(this).closest('form').submit();
      e.stopPropagation();
    } else {
      return false;
    }

});

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

 load_comment();


// End of (document).ready(function){}
}); 
</script>


 </body>
</html>

获取.php

<?php

$connect = new PDO('mysql:host=localhost;dbname=testcaseedit_db', 'root', '');

$query = "
SELECT * FROM tbl_comment WHERE comment_id = comment_id
";

$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';

foreach($result as $row) {
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading"> <b> comment_id: </b> '.$row["comment_id"].' </div>
  <div class="panel-body"><b> Comment: </b> <br>  '.$row["comment"].' </div>
  <div class="panel-footer" align="right">

  <button type="button" class="btn btn-default edit" id[1]="'.$row["comment_id"].'"  id[2]="'.$row["comment"].'">Edit</button>

  </div>
 </div>
 ';
}

echo $output;

?>