How does stackoverflow code the comments to work that way? [closed]
I'd like to create a feature similar to what stackoverflow does for comments on this site. Essentially allow the person who wants to post a line of text, to write it in, hit submit, and immediately see if posted on the page without having to leave the page.
Must be ajax, but Im curious how I might do this with javascript - or by using jquery, or by using...
Any thoughts? Feel free to comment here to see how it works
You are correct. Take a look at a complete tutorial here:
- http://net.tutsplus.com/tutorials/php/asynchronous-comments-with-jquery-and-json/
Go to the Javascript part to see how it's done on the client side.
SO definitely does use jquery, whether or not that effect is a direct result of it I don't know
this looks like it might be useful (just in reverse)
http://davidwalsh.name/animated-ajax-jquery
I'm not sure it is implemented like this but there is a simple way:
1) User fills the comment textbox and hits "Publish" button 2) A javascript function updates the User HTML with the new comment so a refresh is not needed 3) A javascript function makes an AJAX request so the database is also updated
Simple like that :)
I don't know exactly how stackoverflow does it, but here is a pretty simple way.
- When you generate your question/answer level entries, tag them with an attribute (maybe _postId="..." or something).
- Have a comment box that expands into view or whatever you choose, and a container to hold comments in. Give these things so that you can find them in the DOM using a combination of the post ID and the class name.
- When submitted, send an XML HTTP Request (XHR). Let's say for simplicity (you'll need to make it more secure) that the XHR sends the user ID, post ID that's being commented on, and the text body.
- Have the server respond with confirmation when the request is complete. Now you can create the comment HTML with Javascript and append it to your comments container for the appropriate box.
This is simple ajax stuff.
Juste see there :
- Ajax tutorial
- Ajax example
精彩评论