ajax comments show on submit w / out page refresh

Question

I wrote the beginnings of a very simple comment system. It uses jQuery / AJAX / PHP MySQL. So far it works fine. But, once a comment is submitted you have to refresh the page to show the comment. How can it show on submit.

I hope this isn't too much code here, but here it is in three parts. The jQuery / the php insert comment query / the php select comments query.

jQuery / AJAX:

$(document).ready(function() {
  $('#button').click(function() {
    var name = $('#name').val();
    var comment = $('#comment').val();

    if(name == '' || comment == '') {
        $('#comment_messages').html('Please enter both fields');
    } else if(name !== '' || comment !== '') {
        $('#comment_messages').html('');

    $.ajax({
    type: 'POST',
    url: 'comments.php',
    data: 'name='+name+'&comment='+comment,
    success: function(data) {
    $('#comments_area').append(data);
    }
    });
    }
  });
});

PHP INSERT (to insert comments):

<?php

include('init.inc.php');

if(isset($_POST['name'], $_POST['comment'])) {
  $name = $_POST['name'];
  $comment = $_POST['comment'];
  if(!empty($name) && !empty($comment)) {
    $query = mysql_query("INSERT INTO comments VALUES(NULL, '$name', '$comment', CURRENT_TIMESTAMP)");
    if($query === true) {

      // right here is what is being returned to success: function(data) in the ajax script.  What's the best way to return the comment here? 

    } else {
      echo 'Hmmm... that\'s odd........';
    }
  } else {
    echo 'Please enter both fields';
  }
}

?>

PHP SELECT (to retrieve comments):

<?php

$query = mysql_query("SELECT * FROM comments ORDER BY time DESC LIMIT 10");

  $num = mysql_num_rows($query);
  if($num >= 1) {
    while($fetch = mysql_fetch_assoc($query)) {
      $name = $fetch['name'];
      $comment = $fetch['comment'];
      $time = $fetch['time'];

      ?>

        <div id="user_comments">

          <?php echo $name; ?> said at: <span id="time_stamp"><?php echo $time; ?></span><p>- <?php echo $comment; ?>

        </div>

      <?php

    }
}

?>

UPDATE:

Added two lines at bottom:

$(document).ready(function() {
  $('#button').click(function() {
    var name = $('#name').val();
    var comment = $('#comment').val();

    if(name == '' || comment == '') {
        $('#comment_messages').html('Please enter both fields');
    } else if(name !== '' || comment !== '') {
        $('#comment_messages').html('');

    $.ajax({
    type: 'POST',
    url: 'comments.php',
    data: 'name='+name+'&comment='+comment,
    success: function(data) {
    $('#comments_area').append('<b>'+name+'</b><p>- '+comment);
    $('#comment_messages').html(data);
    }
    });
    }
  });
});

Answer 1

You already have the comment when you send it, so when the AJAX call to submit the comment returns a successful, you can just append the comment without actually getting it from PHP/AJAX.

So don't return the comment, that's just data which isn't actually going to be used.

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
$('#comments_area').append('<b>'+name+'</b>: '+comment);
}
});
}
});

And return a 200 statuscode in your PHP file if succes, or a 4xx statuscode if fail. This way only when a 200 statuscode is returned, it will go into the succes: block

Instead of appending the comment like above, you could also use jQuery templates ( http://api.jquery.com/template/).

Filter by statuscode too: (doc on this page): http://api.jquery.com/jQuery.ajax/

Catch failure like in example below:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    // add comment here, succes will go here if ajax returns a 200 statuscode
  }
  error: function(){
    // add failure here, error will go there if ajax returns a 4xx statuscode
  }
});

If you want to use the statuscodes, take a look at this example:

$.ajax({
  statusCode: {
    200: function() {
        //succes
    },
    400: function(){
        // bad request
    }
  }
});

Answer 2

@Graham, as stated by Topener you can do or in addition what can you do is that as ajax() response send one numeric code

if(//name and comment empty){
  echo "0";
} else if (// name and comment not inserted to db table){
  echo "1";
} else if (//successful){
  echo "2";
}

now based on this ajax response you can code for java-script i.e

if(response == '0'){
  $('#comment_messages').html('Please enter both fields');
} elseif (response == '1'){
  $('#comment_messages').html('Hmmm... that\'s odd........');
} elseif (response == '2'){
  $('#comments_area').append('<b>'+name+'</b>: '+comment);
}

Hope you get it.

Answer 3

You could so something like

$.ajax({
type: 'POST',
url: 'comments.php',
data: 'name='+name+'&comment='+comment,
success: function(data) {
    $('#comments_area').append(data);
    $('user_comments').load('selectcomments.php #user_comments')
}

Then it would save the entry, and reload the comment section.

But you should set #user_comments as a container ID, and never use ID's for a repeating element.

So i would do

<div id="user_comments">
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
        <div class="comment">comment info here</div>
</div>

And then in your Comment Insert on SUCCES i would do a SUCCES messeage for the user.