How to make edit form appear in proper place?

Question

I tried to make this edit form appear when I click edit button using ajax jquery. It's working, but the form not appear in proper place.

This is a pict before edit button clicked

This is a pict after edit button clicked

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);

            }

        });



    });

edit-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

Based on index.php, it looks like you'll have a <div id="display-edit-form"></div> for each comment entry. In your ajax success function,

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

What part of that function decides which div to put the form in?

UPDATE:

To clarify, this is what you have:

<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>

There are three div elements that all match the jQuery expression $(#display-edit-form). You're already accessing the id of the button that was clicked, but you're not actually using it anywhere. You'd need something like this:

$(".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);
        }
    });
});

and your index.php would have this:

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

This way, you'd end up with something like:

<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>

and your code can distinguish between the different comment form divs.

How to make edit form appear in proper place?

Sign up