Update div after ajax database insert

Question

so i have some comments pulled from a database and echoed into a div.

Im am entering new comments via a form and they are inserted into the database with ajax.

I want the comments in the div to update and show the new ones as soon as they are posted.

How can i refresh the div to show new content, without the page loading again?

javascript is like so:

      // ... goes after Validation
    if (check == true) {
$.ajax({
type: "POST",
url: "process/addcomment.php",
data: $targetForm.serialize(),
dataType: "json",
success: function(response){

    if (response.databaseSuccess)
       $comment.after('<div class="success">Update Added!</div>');
    else
       $comment.after('<div class="error">Something went wrong!</div>');

}
        });
    }
    return false;
});

});

Thanks for any help.

How does `response` look like? If you do `console.log(response)`, ehat do you get? — Sergio, Sep 12 '13 at 21:20
I'm guessing you've seen something cool on the web, like on Stack Overflow, and what you're looking for is websockets or long polling, and that you don't realize that this is a lot more complicated than you think it is. — adeneo, Sep 12 '13 at 21:22
You might find it helpful to look at [this SO post](http://stackoverflow.com/questions/18724011/post-not-posting-data#18724684), and especially at the simplistic AJAX examples at bottom. Note that jQuery AJAX's default method for exchanging data (i.e. dataType) is HTML unless you specify otherwise. — cssyphus, Sep 12 '13 at 22:28

score 0 · Answer 1 · answered Sep 12 '13 at 21:38

I think you would like to use

http://api.jquery.com/prepend/ for making new comments on the top,

OR,

http://api.jquery.com/append for making new comments on the bottom.

right after using

   $comment.after('<div class="success">Update Added!</div>');

Just append or prepend the valid structure that forms your comment box is okay for it. just like for example:

$("#comment-holder").append("<div class='commentbox'><p class='commenthead'>" + response.newCommentHeadline + "</p><p class='commentcontent'>" + response.newCommentContent + "</p></div>");

Also worth looking into your response.databaseSuccess, you might want to compare it more strictly like using "==", because boolean not always work as you expect, since i am not sure if your responding document are in the correct format that it correctly interprets as a boolean.

Saeed Alizadeh · Answer 2 · 2013-09-12T22:13:26.267

you should extract your required data from response json and generate a Html for appending to your div with id of "comment" then as you apply your css it will get styled.

my suggestion is if you don't want to add extra info from your server to the comment, you only need a flag as success or fail and instead of sending data to server and retrieving it you can use your local data when successfully inserted to your database

if (check == true) {
  $.ajax({
     type: "POST",
     url: "process/addcomment.php",
     data: $targetForm.serialize(),
     dataType: "json",
     success: function(response){
            $("#comment").after('<div><div class="from">'+response.from+'</div><div class="message">'+response.message+'</div></div>');
     }
     fail:function(){
            $("#comment").after('<div class="error">Something went wrong!</div>');
     }
});
}

Update div after ajax database insert

2 Answers2