Publish comment without refreshing the page using Ajax?

Question

Textarea form submitting the data to the server but it isn't display the comment without refreshing the page

Here is the Script:

$("#post_reply").click(function(event) {
    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){
                $.ajax({
                    type: 'POST',
                    url : 'http://localhost/tech1/services/get_more_comments.php',  
                    data: 'last_id='+last_id,
                    success: function(data){
                        $('.view_container').append(data);
                        $('.view_container_parent').load('get_more_comments.php');
                    },
                    complete: function(){
                        console.log('DONE');
                    }                       
                });
            }
        });  
});

Here is the structure of html and view_container_parent has to be loaded without refreshing

<div class="comments" id="comments">
    <div class="comm_container">
        <div class="insert_container">
             <form class="commentform">
             <textarea>
             </form> 
        </div>
     </div>          
     <div class='view_container_parent'>//whole lot of comments
         <div class='view_container'>//single comment
         </div>
         <div class='view_container'>//single comment
         </div>
         <div class='view_container'>//single comment
         </div>
     </div>
</div>

Answer 1

Try this:

$("#post_reply").click(function(event) {
    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){
                $('#ajax_loading').show();
                $.ajax({
                type: 'POST',
                url : 'http://localhost/tech1/services/get_more_comments.php',  
                data: 'last_id='+last_id,
                success: function(data) {
                    $('#ajax_loading').hide();
                    console.log('AJAX SUCCESS');
                    $('.view_container_parent').append(data);
                    console.log('Append data');
                    console.log(data);
                },
                complete: function() {
                    console.log('DONE');
                }                
                });
            }
        } 
    );  
});

Your response must be (loop):

<div class="view_container">
...
</div>

Your HTML only need:

<div class="view_container_parent">
    <div class="view_container">
        <!-- Another comment before -->
    </div>
    <!-- The ajax will append data from here -->
</div>

You can test your response data with console.log(data)