Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by shen jiayu
shen jiayu
Courses Plus Student 1,063 Points

JQUERY AJAX problem...

i want to do the facebook style status and comments.now i got stuck at post the status.........i can insert the status into the database via AJAX... however..after i post the status, this status is not gonna show up as the first one until i refresh the page manually...

henrikh
henrikh
3,666 Points

If you want the status to show up, right away (with no reload of the page) you could just "fake it" by inserting an element (the html) when the ajax is successfully inserted into the database. Then it would give the user a notice that it's been successfully inserted. If you would like it to update live, for everybody else, you must use a ping system, that keeps checking for new comments all the time (ajax is not the correct way of doing that) .. you could read more about sockets here: http://socket.io/

shen jiayu
shen jiayu
Courses Plus Student 1,063 Points

$("#submitit").click(function(){ var content = $("#npost").val(); var dataString = 'content='+content; $.ajax({ type:"POST", url:"../community/insertpost.php", data:dataString, cache: false, success: function(html){ $("#community").append(html); $("#npost").val(""); } }); return false; });

shen jiayu
shen jiayu
Courses Plus Student 1,063 Points

damn ...this format is messed up ...id community is the most outside div which contains all the status....and class postcontainer is the div to contain each status....

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

Instead of append(), you may want to prepend(), which will add it before the object, instead of after.

2 Answers

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

Here is a simpler ajax call. The passed variables from jquery would be the comment value and post name and any other information needed. The data value is what the ajax.php file echos as a value (should be formatted as current comment list). The value that your ajax.php file returns could be a refreshed list of comments from a db query after the insert. The data value then replaces the old comment list.

$.post('ajax.php', {variable_name:variable_value,variable_name_2:variable_value_2}, function(data){
$("#identifier").html(data);
});
shen jiayu
shen jiayu
Courses Plus Student 1,063 Points

hello~i cannot understand the part of data which is inside the function.......could u specify it in my situation??

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

The "data" variable is what is passed back to jquery from the php file by means of the php file echo/print something. This something could be a new queried list of comments after your insert. The data variable will become this new comment list. You can then use jquery's html() function to replace your old list of comments with the new list.