Topic: Form POST and AJAX?

I have a working comment system, now the problem is implementing AJAX. I want to make it to where the comments are added as partials, so the entire page doesn't have to be reloaded.

The problem I ran into was that I'm working with an actual FORM now, and not DIV elements. I don't even know where to start.

I've put a good hour into this and I can't make any progress. Any suggestions?

I have already created an "addcomment" view and RJS file. Everything else is...non-existent.

Last edited by zac439 (2007-10-04 21:47:59)

Re: Form POST and AJAX?

Make a partial called _comment.rhtml and put all the common elements of all comments into that.

In the page where you display/have the ability to add comments, you should have the comments form and a div called something like "comments". In the RJS file you can simply call

page.insert_html :bottom, :comments, :partial => "comment"

and that will insert the partial.

Make the form pass to the RJS action (called something like "create"), which will then create your comment:

@comment =[:comment])
flash[:notice] = "Your comment has been created."

From there the RJS page should insert the partial (afore mentioned) into the bottom of the comments div. If you wish you may insert it into the top by changing :bottom to :top. Also I think there are :after and :before methods too which you are able to specify which elements in that div you would like to place the object you're inserting before or after.

Re: Form POST and AJAX?

Hmm, let's see. I tried your code and it is still reloading the page without AJAX. I get the feeling there is fault in my RJS file. Here are my files:

Display (view):

<div id="comments">
          <%= render :partial => 'show/comment', :collection => @comments_submitted %>

def addcomment
   @page= page.find_by_id(params[:id])
   @comments_submitted = @page.comments.find(:all, :limit => 5, :order => 'id DESC')
   respond_to do |wants|
      wants.html { redirect_to page_path(@page.permalink)  }
      wants.js  {  render  }

RJS File (addcoment.rjs):
page.insert_html :top, :comments, :partial => 'show/comment', :collection => @comments_submitted

Partial file (.rhtml)
<div class="commentbox">
<%= link_to comment.header, :controller => 'show', :action => 'page', :id => comment.permalink %>
<%= '<br /> by ' + comment.subtext+ ' (' + comment.created_at.to_formatted_s(:long) + ')'%>
<br />
<%= comment.comment_text%>


perhaps I shouldn't use a form submit button? I was reading more in the API, and I can make a javascript button that would go directly to the RJS file apparently. I'm not sure though. Any ideas?

Last edited by zac439 (2007-10-05 00:27:48)

Re: Form POST and AJAX?

Do not specify:

wants.js { render }

as render is most likely expecting an argument i.e. something to render.

Just do wants.js

Your partial code instead of:

page.insert_html :top, :comments, :partial => 'show/comment', :collection => @comments_submitted

Should be:

page.insert_html :top, :comments, { :partial => 'show/comment', :collection => @comments_submitted }

And is your controller really called show?

Use a form submit button. The reason why it appears to be "doing nothing" is because your page is erroring and thusly not returning anything. I recommend to install Firebug for Firefox and use its console (bottom right hand corner, signified by a white tick in a green circle or a white cross in a red circle if you have JS errors), and that will tell you what is POST'ing and GET'ing.

Re: Form POST and AJAX?

Thanks for the help, but it still doesn't work. I downloaded Firebug and will be looking at it more closely later, trying to find the problem.

The comments still work, and the page is still refreshing. Not using AJAX, though.

<form method="post" action="show/this-permalink">
<textarea id="comment_comment_text" rows="5" name="comment[comment_text]" cols="35"/>
<input type="submit" value="Add Comment" name="commit"/>

There is the HTML of my form. Maybe I'm wrong, but shouldn't it have a reference to AJAX in there? Or maybe that is all done in the "addcomment" controller?

This one has me stumped!

Re: Form POST and AJAX?

Alright guys, I've made some sort of progress. It seems my intuition was right, the form post element needs to have a "link_to_remote" tag in it, to signal that the request is indeed for an AJAX call.

Now, the page doesn't reload. (Which it shouldn't) However, the partial isn't being added. In fact, the RJS file isn't working at all. When I reload the page, the comments are added. The problem is solely with the call to my RJS file.

My controller:

def addcomment
   @page= Page.find_by_id(params[:id])
   @comments_submitted = @page.comments.find(:all, :limit => 5, :order => 'id DESC')
  respond_to do |wants|
       wants.html { redirect_to page_path(@page.permalink) }
      wants.js  {  render  }

My RJS file (addcomment.RJS):
page[:page_score].visual_effect :shake

Here I'm just shaking an element on the page in particular, just to check if the RJS file is working at all. (Which it isn't)
My Form call (just the beginning):
<% remote_form_for (:comment, :url => page_path(:id => @page))do |f| %>

Last edited by zac439 (2007-10-05 18:17:22)

Re: Form POST and AJAX?

wants.js  {  render  }

See Radar comments in reply #4

Re: Form POST and AJAX?

timmaah - that still doesn't fix anything. In fact, I think I need that to render the Javascript file (addcomment.RJS).

Any ideas anyone?

Re: Form POST and AJAX?

looks like you don't need the render but you should be fine how it is...

The next step is to check log/development.log and see what is shown in there when you add a comment via the remote form. Either it will have no errors and it will tell you what it is rendering, or it will have an error and because its an ajax call it does not display in the browser.

If the log shows its working as expected, check firebug under the "console" tab. You will see the ajax request and can inspect what it is returning.

Re: Form POST and AJAX?

Firebug helped me find the problem. I noticed my AJAX call was actually redirecting to a javascript-url...not the URL I intended. I made a direct path to the actual url thanks to routes, and that fixed it.

however, now I'm having another problem. It seems every time I submit a comment, the comments that are displayed are always one behind what they should be. (And the partial is just being re-added, so it's not just adding what I want)

I included a screenshot below:

Here is my RJS:

page.insert_html  :top, :comments, { :partial => 'comment', :collection => @comments_submitted }

Re: Form POST and AJAX?


I had to query the database AFTER I created the comment, haha. What a dumb mistake!

(and of course I limited the search to the latest result)

Thanks all.