How to display comment form submit without refresh the page using AJAX?

Question

Comment Form is submitting and also data getting saved to the database. But not displaying on the browser without refreshing the page.

here is the code:

$("#post_reply").click(function (event) {
    $("#data_status").html("");
    $('#ajax_loading').show();
    event.preventDefault();
    if (document.getElementById('_comment').value.trim() == "") {
        return false;
    }
    $.post('../services/leave_comment.php', $("#open_status").serialize(), function (data) {
        $('#ajax_loading').hide();
        if (data.split("::")[1] == true) {
            $("#data_status").html("Commented Successfully..");
            $("#data_status").fadeOut(3000);
            document.getElementById('_comment').value = '';
            $('#_comment').html("");

        } else if (data.split("::")[1] == false) {
            $("#data_status").html("Error occured in Comment Submission.. TryAgain..");
            $("#data_status").fadeOut(3000);
        }
    });
});

EDIT:

All i can understand is i haven't published the data with ajax?? Is this what i need to do??

$("#post_reply").click(function (event) {
$("#data_status").html("");
$('#ajax_loading').show();
event.preventDefault();
if (document.getElementById('_comment').value.trim() == "") {
    return false;
}
$.post('../services/leave_comment.php', $("#open_status").serialize(), function (data) {
    $('#ajax_loading').hide();
    if (data.split("::")[1] == true) {
        $("#data_status").html("Commented Successfully..");
        $("#data_status").fadeOut(3000);
        document.getElementById('_comment').value = '';
        $('#_comment').html("");


$.ajax({
type: 'POST',
url : 'http://localhost/tech1/services/get_more_comments.php',  
data: 'last_id='+last_id,
success: function(data){
$('.view_container').append(data);
},
complete: function(){
console.log('DONE');
                    }                       
                });

    } else if (data.split("::")[1] == false) {
        $("#data_status").html("Error occured in Comment Submission.. TryAgain..");
        $("#data_status").fadeOut(3000);
    }
});
 });

Answer 1

All your code does is post the data to the server. There is nothing that fetches the new comments from the server or manually appends the posted comment. You can either use ajax again to refresh comments or more simply append a comment with the posted content.

Answer 2

I would say to search the web for jQuery's .load :

example:

function updateShouts(){
   // Assuming we have #shoutbox
   $('#shoutbox').load('latestShouts.php');
}

in this case shoutbox would be the containing div with your comments, you would call this function on the success of your ajax post latestshouts.php would only contain the content of that div.

kinda hard to explain, i hope it makes sense to you

link: http://api.jquery.com/load/