AJAX：使用fadeIn附加数据

Question

I opened a question for a different issue that finally led to the one I now need help with. AJAX form Submit to post comments

I got a solution to the js errors I was getting but now the issue is something else.

I'm using a script I found here. Credits and Demo to original script

and it's meant to post comments without refreshing the page with a fadeIn effect. I modified it to fit my project and the issue I have now is that even tho' it is saving the data into the database, it's not loading the comments live. I have to manually refresh the page is I want to see the new content. Since it's not throwing any js errors in the developer console, I can't find what the issue is.

The Comments Section

<div class="comments">
    <div class="top-title">
        <h3>Messages</h3>
    </div>
    <ul class="level-1">
    <div class="comment-block">
<?php while ($row = mysqli_fetch_array($res_post_select))
{
$PageID = $row['PageID'];
$Name = $row['Name'];
$Photo = $row['Photo'];
$PostDate = $row ['PostDate'];
$Comment = nl2br($row['Comment']);
?>
    Posted on <?php echo DATE("F d, Y", strtotime($PostDate)) ?> at <?php echo DATE("g:i a", strtotime($PostDate)) ?>
    <li>
    <span class='comment'>
    <span class='picture'>
    <span><img src='users/images/<?php echo $Photo?>'></span>
    </span>
    <span class='content'><span class='mid-title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
    <span class='clear'></span>
    </span>
    </li>
<?php } ?>

The JS Credits

<script>
$(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');

  form.on('submit', function(e) {
   //$('#submit').on('click', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
      url: 'data/queries/comment-insert.php',
      type: 'POST',
      cache: false,
      data: form.serialize(), //form serialized data
      beforeSend: function(){
        // change submit button value text and disabled it
        submit.val('Posting...').attr('disabled', 'disabled');
      },
      success: function(data){
        // Append with fadeIn see https://stackoverflow.com/a/978731
        var item = $(data).hide().fadeIn(800);
        $('.comment-block').append(item);

        // reset form and button
        form.trigger('reset');
        submit.val('Post Message').removeAttr('disabled');
      },
      error: function(e){
        alert(e);
      }
    });
  });
});
</script>

The comment-insert.php File

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
$ds = DIRECTORY_SEPARATOR;
$base_dir = realpath(dirname(__FILE__)  . $ds . '..') . $ds;
include_once("{$base_dir}..{$ds}include{$ds}dbconfig.php");
include_once("{$base_dir}..{$ds}include{$ds}dbconnection.php");
$conn = dbconnect();

    if(!empty($_POST['comment']))
        {
$Name = mysqli_real_escape_string($conn, $_POST['Name']);
$PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
$ID = mysqli_real_escape_string($conn, $_POST['ID']);
$Comment = mysqli_real_escape_string($conn, $_POST['comment']);

$sql = "INSERT INTO comments
(PageID, ID, Name, PostDate, Comment)
VALUES
('$PageID', '$ID', '$Name', now(), '$Comment')";

    mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));

}
?>

<!-- This is the mark up that should fadeIn after the data is inserted into the database.
 You can refer to the demo found in the credited page -->

<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $Photo ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>

<?php
mysqli_close($conn);
endif

So, the ajax triggers the query found in comment-insert.php but it does not insert live and is not giving any js errors in the console. I have to manually refresh the page to view the comments which defeats the purpose of the live-comment idea.

Answer 1

I am actually making a guess here as to why it might not be working. It might be the order in which you are trying to do things. You are fading the HTML response before it is actually in the DOM. You need to have it in the DOM before you can actually fade it. So instead of doing

var item = $(data).hide().fadeIn(800); // fading while it is not in the DOM
$('.comment-block').append(item);

do

var item = $(data).hide();
$('.comment-block').append(item); // in the DOM
item.fadeIn(800);