AJAX: append data with 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.

Can you preview what the AJAX query is returning in your browsers console network tab? — TomDillinger, May 06 '16 at 03:26
Have you checked that you are at least getting into the `success` callback and getting your HTML in the `data`? — Mikey, May 06 '16 at 03:27
side notes: no need to captialize the PHP variables. and the `DATE()` should be `date()`. — Raptor, May 06 '16 at 03:27
@TomDillinger. It previews the text part. the image doesn't preview. The POST response returns this.
Just to confirm, after you submit a comment, your form is resetting to blank? Your issue might be with your hide/fade-in if your form is resetting as it means your the success function is running. — TomDillinger, May 06 '16 at 03:46
@Mikey. the error handler in the script doesn't return any errors. I am guessing the callback is successful since it passes to the form reset trigger which is the last event in the script. maybe I am mistaken. any suggestions on how to check if the callback is successful? — BlueSun3k1, May 06 '16 at 03:47
I'd use the element inspector to check if the comments are being appended, but are not displaying. — TomDillinger, May 06 '16 at 03:47
@TomDillinger. You are right. I used the element inspector and the firebug html inspector and the comments are being appended and not displaying until the page is refreshed. how can I tackle this? — BlueSun3k1, May 06 '16 at 03:57
So the problem is with your fadeIn code. Try removing the hide/fadeIn component to make sure it displays and then tinker around with different combinations of hide/Fade/display:none to see which one works in your current browser. I'd recommend trying other browsers also to see if it works in those. — TomDillinger, May 06 '16 at 04:01

score 1 · Answer 1 · answered May 06 '16 at 07:01

Your PHP file does not seem to be sending (ECHOing) anything back to the javascript AJAX routine.

Try this. Change your comment-insert.php file like this:

<?php
    $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));

    }
    $Photo = 'your_image.jpg';
    $out = "
        <li><span class='comment'>
        <span class='picture'>
        <span><img src='users/images/" .$Photo. "'></span>
        </span>
        <span class='content'><span class='title'><b>" .$Name. "</b>, Said:</span><br>" .$Comment. "</span>
        <span class='clear'></span>
        </span>
        </li>
    ";
    echo $out;
?>

Note that the above code does not have a $Photo variable and will fail, so I provided one just so the code will not crash. Please fix as appropriate.

Thanks for the response. I tried your approach and I still get the same result. the html result does not append until page refresh. Can you look at the original script to see if you can spot why it might not be working for me? http://www.w3bees.com/2013/09/comment-system-with-jquery-ajax-php-mysql.html — BlueSun3k1, May 06 '16 at 18:52
Rather than turn this answer into a publishable ebook, I added additional assistance in a separate answer. *As always on SO, if any of the above answers are helpful to you, please upvote.* — cssyphus, May 06 '16 at 20:35

score 1 · Accepted Answer · edited May 23 '17 at 12:31

Using someone else's code is always challenging.

First, there is no need for a <form></form> construct. Just use DIVs. That will remove the need to use e.preventDefault() (which is only used to suppress the default <form> behavior of navigating away from the current page).

Next, you only need to use .on() if the element on which the user is clicking has been added into the DOM after it (the DOM) was originally rendered. The purpose of .on() is to instruct the DOM to bind javascript code to an element that will appear later, but that is not yet in the DOM when the javascript code executes. In such a case, without .on(), the user click would do nothing because the code could not bind to a button that did not yet exist.

Please review the simple AJAX examples in this post. Honestly, you can easily build this chat system yourself without using w3bee's code. However, after you built something that kinda works you might want to compare what you came up with to the w3bee code and see if they had any good ideas. But seriously, build it yourself. You will spend days troubleshooting w3bee's code (primarily because it remains a black box) but you can reproduce it yourself in mere hours.

Take the examples in the linked post, copy them to your server, and make them work. Especially this one. You will learn more in 20 minutes playing with these examples than you will in two days of tinkering with w3bee's code.

At the very least, making those examples work on your own system might help you realize what the problem is with the w3bee code you have now.

Having said the above, the problem with the current code is probably in the javascript AJAX success: function. Try displaying what is received (from the PHP side) and see what you get:

$.ajax({
  url: 'data/queries/comment-insert.php',
  type: 'POST',
  data: form.serialize(), //form serialized data
  success: function(data){
    alert(data);
  }
});

First of, thank you for the great suggestions. I'm going to look into them now to see what I can learn from it and come up with. In response to the code sample you posted, the alert(data) returns the html code
Right, so a few observations. First, the $Photo variable appears to be blank on the PHP side. Next, you can take whatever is returned by PHP and make it appear in the DOM by doing something like this ***inside the AJAX `success: function(){$('#someDivNameThatExists').html(data);});`** — cssyphus, May 07 '16 at 00:23
it took a while but it's sort of working except for 2 things that perhaps you can still help me with. 1) The messages post and they fade in but they appear at the bottom of all the messages instead of appearing at the top as the first/latest message, however when the page is refreshed, it appears in the proper place at the top. 2) sometimes the message appears duplicated until the page is refreshed, this doesn't happen all the time, maybe every 2 to 3 messages. — BlueSun3k1, May 12 '16 at 03:23
(1) Instead of `$('.comment-block').append(item);`, use **`$('.comment-block').prepend(item);`** (2) Intermittent problems are a bugger. Hmmmm. Nothing leaps to mind. See if #1 solves it, and if not, close this question *(by choosing a Best Answer)* and post a new question. (That way you'll have dozens of people reading/helping instead of waiting on me to visit SO) — cssyphus, May 12 '16 at 18:49
Thank you. prepend worked and now the comments appear at the top as needed. I'll try to get a solution on problem number two. Thanks for all the help. — BlueSun3k1, May 12 '16 at 19:22

score 0 · Answer 3 · answered May 06 '16 at 03:27

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

Thanks Mikey but that change did not have any effect. I still get the same result. — BlueSun3k1, May 06 '16 at 03:48

AJAX: append data with fadeIn

3 Answers3