# Adding AJAX 'Post a Comment' to blog

**URL:** <https://www.ruby-forum.com/t/adding-ajax-post-a-comment-to-blog/90089>\
**Category:** Rails\
**Created:** [March 25, 2007, 11:33pm UTC](https://www.ruby-forum.com/t/adding-ajax-post-a-comment-to-blog/90089 "2007-03-25T23:33:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [March 25, 2007, 11:33pm UTC](https://www.ruby-forum.com/t/adding-ajax-post-a-comment-to-blog/90089/1 "2007-03-25T23:33:19Z")

</div>

I am working a blog system for my girlfriend, and am trying to add  
AJAX to many places throughout the blog where refreshing is most  
troublesome; like when visitors post comments!

Basically I have a text area for the comment and a submit button, what  
I want to do is obviously only refresh the

 which contains the  
current comments when a user submits their comment.

I thought I had figured it out, however when a user posts a comment  
the comment\_list div shows empty until the page is refreshed ☹

Here is the add\_comment action in my controller:

def add\_comment  
Post.find(params[:id]).comments.create(params[:comment])  
end

And here is my show.rhtml which shows the blog post + comments and  
comment form :

\<%= javascript\_include\_tag “prototype” %\>

\<%= render :partial =\> “post”, :object =\> @post %\>

\<%= link\_to ‘Edit’, :action =\> ‘edit’, :id =\> @post %\> |  
\<%= link\_to ‘Back’, :action =\> ‘list’ %\>

## Comments

\<% for comment in @post.comments %\> \<%= comment.body %\> 
* * *
\<% end %\>

\<% form\_remote\_tag :url =\> { :action =\> “add\_comment”, :id =\>  
@post }, :html =\> {:name =\> ‘add\_comment\_form’}, :update =\>  
‘comment\_list’, :success =\> visual\_effect(:highlight, “comment\_list”)  
do %\>  
\<%= text\_area “comment”, “body” %\>   
  
\<%= submit\_tag “Comment!” %\>  
\<% end %\>

Also I had to create a blank add\_comment.rhtml view otherwise I kept  
getting template errors.

Anyone got any suggestions/ideas?

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [March 26, 2007, 6:37am UTC](https://www.ruby-forum.com/t/adding-ajax-post-a-comment-to-blog/90089/2 "2007-03-26T06:37:41Z")

</div>

Hi,

If I understand issue correctly, the add\_comment isn’t rendering  
anything hence comment\_list isn’t updated.

Try this:

Move the \<% for comment in @post.comments %\>…\<% end %\> loop into a  
partial called \_post\_comments\_list.rhtml. Replace the loop in  
show.rhtml with:

 \<%= render :partial=\>'post\_comments\_list'

This calls the partial from show.

Replace add\_comment with:

def add\_comment  
@post = Post.find(params[:id])  
@post.comments.create(params[:comment])  
render :partial=\>‘post\_comments\_list’  
end

This sets the @post variable, creates the comments, and renders the  
comments list for the @post variable.

The above isn’t tested but I hope it does what you want.

Hope this helps!

Shawn

removed\_email\_address@domain.invalid wrote:

> I am working a blog system for my girlfriend, and am trying to add  
> AJAX to many places throughout the blog where refreshing is most  
> troublesome; like when visitors post comments!
> 
> Basically I have a text area for the comment and a submit button, what  
> I want to do is obviously only refresh the
> 
> which contains the  
> current comments when a user submits their comment.
> 
> I thought I had figured it out, however when a user posts a comment  
> the comment\_list div shows empty until the page is refreshed ☹
> 
> Here is the add\_comment action in my controller:
> 
> def add\_comment  
> Post.find(params[:id]).comments.create(params[:comment])  
> end
> 
> And here is my show.rhtml which shows the blog post + comments and  
> comment form :
> 
> \<%= javascript\_include\_tag “prototype” %\>
> 
> \<%= render :partial =\> “post”, :object =\> @post %\>
> 
> \<%= link\_to ‘Edit’, :action =\> ‘edit’, :id =\> @post %\> |  
> \<%= link\_to ‘Back’, :action =\> ‘list’ %\>
> 
> ## Comments
> 
> \<% for comment in @post.comments %\> \<%= comment.body %\> 
> * * *
> \<% end %\>
> 
> \<% form\_remote\_tag :url =\> { :action =\> “add\_comment”, :id =\>  
> @post }, :html =\> {:name =\> ‘add\_comment\_form’}, :update =\>  
> ‘comment\_list’, :success =\> visual\_effect(:highlight, “comment\_list”)  
> do %\>  
> \<%= text\_area “comment”, “body” %\>   
>   
> \<%= submit\_tag “Comment!” %\>  
> \<% end %\>
> 
> Also I had to create a blank add\_comment.rhtml view otherwise I kept  
> getting template errors.
> 
> Anyone got any suggestions/ideas?

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [March 26, 2007, 4:59pm UTC](https://www.ruby-forum.com/t/adding-ajax-post-a-comment-to-blog/90089/3 "2007-03-26T16:59:21Z")

</div>

Worked a treat thanks!