Question

当我使用ajax jquery单击编辑按钮时，我尝试使此编辑表单出现。它工作正常，但表格没有出现在适当的位置。

这是在点击编辑按钮之前的图片

点击编辑按钮后的图片

JS

$(".btn-comment").click(function() {
        var id = $(this).attr("id");
        $.ajax({
            url : '../edit-form.php',
            type : 'post',
            data : 'id='+id,
            success : function(msg) {
            //  $("#container-positive").hide().load('form-edit.php').fadeIn(1000);
                $("#display-edit-form").hide().fadeIn(1000).html(msg);
            }
        });

    });

修改-form.php的

<?php
include_once '../config.inc/koneksi.php';

$id_comment=$_POST['id'];
$stmt=$db_con->prepare("SELECT * FROM tb_comments WHERE id_comment=:id_comment");
$stmt->execute(array(":id_comment"=>$id_comment));
$row=$stmt->fetch(PDO::FETCH_OBJ);
?>
<form id="edit-form" method="post" action="">
 <div class="form-group">
    <textarea type="text" class="form-control" name="description" id="description" required><?php echo $row->description; ?></textarea>
    <button type="submit" class="btn btn-primary" name="update-profile">Kirim</button>
   <button class="btn btn-primary" type="button" id="btn-cancel">Batal</button>
  <div class="clearfix"></div>
              </div>
          </div>
      </div>
    </div>

的index.php

  <?php }

    while($rowcom=$comment->fetch(PDO::FETCH_OBJ)) {
    $profile ="../../profile/".$rowcom->username;
    $title =  clean_url($rowcom->title);
    ?>
   <tr>
   <td >
   <div class="media">
     <div class="media-left-detail">
    <div class="space">
    <a href="<?php echo $profile ?>">
   <img class="media-object" src="../<?php echo $rowcom->image;?>" alt="...">
    </a>
    </div>
    </div>
   <div class="media-body">
    <div class="row">
    <div class="col-md-10">
    <h4 class="name"><a href="<?php echo $profile ?>"><?php echo $rowcom->username; ?></a><span><i class="glyphicon glyphicon-time"></i> <?php  echo date('H:i', strtotime($rowcom->created_date));?> &nbsp;<?php echo date("d F Y", strtotime($rowcom->created_date));?></span></h4>
     <p class="text"><?php  echo $rowcom->description;?></p>
     <div class="clearfix">
    <div id="display-edit-form">
</div>
 <ul class="icon-list">
<li><a class="btn btn-comment"id="<?php echo $rowcom->id_comment;?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
</li>
<li>
<a class="btn btn-delete" id="<?php echo $rowcom->id_comment;?>"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></li>
</ul></div>

Answer 1

根据index.php，您似乎每个评论条目都有一个<div id="display-edit-form"></div>。在你的ajax成功函数中，

success : function(msg) {
    $("#display-edit-form").hide().fadeIn(1000).html(msg);
}

该函数的哪一部分决定将表单放入哪个div？

更新：

澄清一下，这就是你所拥有的：

<div>
    <div>first comment...</div>
    <div id="display-edit-form"></div>
</div>
<div>
    <div>second comment...</div>
    <div id="display-edit-form"></div>
</div>
<div>
    <div>third comment...</div>
    <div id="display-edit-form"></div>
</div>

有三个div元素都与jQuery表达式$(#display-edit-form)匹配。您已经访问了已点击的按钮的id，但您实际上并未在任何地方使用它。你需要这样的东西：

$(".btn-comment").click(function() {
    var id = $(this).attr("id");
    $.ajax({
        url : '../edit-form.php',
        type : 'post',
        data : 'id='+id,
        success : function(msg) {
            $(".display-edit-form[data-id=" + id + "]").hide().fadeIn(1000).html(msg);
        }
    });
});

并且您的index.php会有：

<div class="display-edit-form" data-id="<?php echo $rowcom->id_comment ?>">
</div>

这样，你最终会得到类似的东西：

<div>
    <!-- first comment -->
    <div class="display-edit-form" data-id="1">
    </div>
</div>
<div>
    <!-- second comment -->
    <div class="display-edit-form" data-id="2">
    </div>
</div>
<div>
    <!-- third comment -->
    <div class="display-edit-form" data-id="3">
    </div>
</div>

并且您的代码可以区分不同的评论形式div s。

如何使编辑表单出现在适当的位置？

1 个答案: