Ajax - load data from database for every comment separately - php

Question

I have a form with textarea and dropzone for uploading images, and submit button. When the submit button is clicked - new comment is created and textarea content is saved to database, with all images added to dropzone (they are stored on server and in the database).
I'm trying to load div that contains comments via ajax, and below every comment there should be displayed all images for that particular comment.
I'm calling function like this:
<div id="comments_ticket_div"><?php echo commentsTicketList($id); ?></div>
And this is my function with mysql queries and output:
function commentsTicketList($id){
global $dbh1;
$query = $dbh1->query("SELECT a.*, b.avatar, b.first_name, b.last_name FROM `tickets_comments` AS a
INNER JOIN users AS b
ON a.tickets_comments_user = b.user_id
WHERE tickets_comments_parent = $id AND comments_parent=0 ORDER BY a.tickets_comments_date DESC");
$data = "";
while ($a_row = mysqli_fetch_array( $query )) {
$tickets_comments_id = $a_row['tickets_comments_id'];
$data .= '<span class="timeline-seperator text-center"> <span>'.$a_row['tickets_comments_date'].'</span></span>
<div class="btn-group pull-right"></div></span>
<div class="chat-body no-padding profile-message">
<ul>
<li class="message">
';
if (!empty ($a_row['avatar'])){
$data .= '<img src="'.ASSETS_URL.'/img/avatars/'.$a_row['avatar'].'-50.png" alt="User" class="" />
';
} else {
$data .= '<img src="'.ASSETS_URL.'/img/avatars/sunny.png" alt="User" class="" />';
}
$data .= '
<span class="message-text"> '.$a_row['first_name'].' '.$a_row['last_name'].' <!--small class="text-muted pull-right ultra-light"> 2 Minutes ago </small-->
'.$a_row['tickets_comments_body'].'
<div id="refresh-gallery">';
$queryx = $dbh1->query("SELECT img_url FROM `tickets_attachments` WHERE parent_comment_id = $tickets_comments_id AND parent_ticket_id = $id");
while ($b_row = mysqli_fetch_array( $queryx )) {
$data .= '<p>'.$b_row['img_url'].'</p>';
}
$data .= ' </div>
<ul class="list-inline font-xs">
<!--li>
<i class="fa fa-reply"></i> Odgovori
</li-->
<!--li>
Obriši
</li-->
</span>
</ul>
<!--input id="replubtn" name="replubtn" class="form-control input-xs" placeholder="Type and enter" type="text"-->
</li>
</ul>
</div>';
}
return $data;}
On success I'm loading that div with comments:
$("#comments_ticket_div").load( "<?php echo $_SERVER['REQUEST_URI'];?> #comments_ticket_div" );
And also div with query to get all img's for that comment:
$('#refresh-gallery').load("/.../.../.../edit-ticket2.php?id=<?php echo $id;?> #refresh-gallery");
As a result of this code, loading is working properly for all comments and image names are shown correctly (correct number of images and their names), but not for the last comment. The last comment is showing ALL images, but it should display only those images which belong to that last added comment (as the queryx is indicating above).

Answer 1

This has been solved...in the example given above I was loading #comments_ticket_div, and than later in code I was trying to load #refresh-gallery div that was inside of #comments_ticket_div - and that somehow created a problem.
For the solution, I removed loading of #refresh-gallery div, and apllied loading of #comments_ticket_div in Dropzone .on success function.
myDropzone.on("success", function (file) {
$('#comments_ticket_div').load("/../../../edit-ticket2.php?id=<?php echo $id;?> #comments_ticket_div");
});