CODEWITHSUNDEEP
javascriptphphtmlajax
user13382159
user13382159

Reputation: 13

How to refresh the comments with ajax?

I was to use ajax to automatically update the page so when a new comment is added I don't have to refresh the page to see it. I have a commented out section in my code where I have tried to do this. I can add posts new comments but when I do I have to refresh the page in order to see the new comment and I just want it to appear automatically when posted. 

$(document).ready(function() {

     var comments = document.getElementById("allcomments").value; 

     //Get Storage 
                var username = window.localStorage.getItem("username");

        // Call Ajax for existing comments
        $.ajax({
        type: 'GET',
        url: 'URL.php',
        success: function(result) {
            var arr = JSON.parse(result);

            for(var i = 0; i < arr.length; i++) {
                var obj = arr[i];   

                var output = document.getElementById("allcomments");  

                output.innerHTML += '<div class="comment-container"><div class="username">'+obj.username+'</div><div class="comment">'+obj.comment+'</div><div class="date">'+obj.commDate+'</div><div class="like">'+obj.sentiment+'</div></div>';

            }

        }
    });

    return false;
}); 

/*//Refresh comments
 var int=self.setInterval("showComments()",5000);

    function showComments(){
        $.post("comments.php", function ( arr ) {
            $("#allcomments").html( arr );
        });
    } */

HTML

            <h1>Forum</h1>
                <form id="forumPost" method='POST'>
                   <textarea rows="3" col="60" name="comment" placeholder="Create a Post..." id="comment"></textarea>
                   <button><input type='submit' name='submit' value='Post' class="post"></button>
                </form>
                <p id="error" class="errormessage"></p>
                <p id="allcomments" class="postmessage"></p>

                <div class="comment-container">
                    <div class="username"><!--obj.username--></div>
                    <div class="comment"><!--obj.comment--></div>
                    <div class="date"><!--obj.commDate--></div>
                    <div class="like"><!--obj.sentiment--></div>
                </div>

PHP

// Print out existing comment
$query  = "SELECT comments.commDate, comments.ID, comments.username, comments.comment, users.username, comments.sentiment FROM comments LEFT JOIN users ON comments.username = users.username"; 
$result = mysqli_query($db_server, $query);
if (!$result)
    die("Database access failed: " . mysqli_error($db_server));
while ($row = mysqli_fetch_array($result)) {

    $comments[] = $row; 
}

mysqli_free_result($result);

require_once("db_close.php");

echo json_encode($comments);

Upvotes: 0

Views: 385

Answers (1)

Gustone Alwanga
Gustone Alwanga

Reputation: 300

Try removing your code from this block- 

$(document).ready(function() {

}

Then change 

<button><input type='submit' name='submit' value='Post' class="post"></button>

to: 

<button><input type='button' id='submit' value='Post' class="post"></button>

And now put your ajax post code in this block:

$("#submit").on("click", function(){

});

Upvotes: 1

Related Questions