How to make edit form appear in proper place?
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));?> <?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>
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.