Ajax submit form, rails3

Question

Update, going off what Frank wrote below:

In my post's show view I have:

<span id="commentsPartial">
<%= render 'comments' %>
</span>

In the comments partial I have:

<% @comments.each do |comment| %>
    <%= comment.description %>
<% end %>
<br/>
<%= render '/comments/form' %>

In my form partial I have:

<%= form_for [@comment], :remote => true do |f| %>
  <% if @comment.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</h2>

      <ul>
      <% @comment.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.text_area :description, :class => "forms", :style => "width:80%;height:120px;"%>
  </div>
  <div class="actions" style="margin-top:10px;">
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <%= f.hidden_field :post_id, :value => @post.id %>
    <%= f.submit :class => "button-style" %>
  </div>
<% end %>

My views/comments/create.js.erb page has:

$("#commentsPartial").html("<%= escape_javascript(render('comments')) %>");

When I submit a new comment - it is successfully created. The page however remains static. When I watch in firebug, I see the comment is created, and there is a get called on the post which returns a success - even though the page doesn't update... very confused

tmaximini · Accepted Answer · 2011-07-03 15:03:36Z

2

I think you are following the wrong approach and think too much jQuery like instead of the "rails way" to do it. You can just pass the option :remote => :true to your form_tag or form_for in order to tell rails to use ajax instead.

Probably you want to nest the comment into another Model, (google: nested routes), and then have an file in

app/views/comments/create.js.erb whcih is something like this:

$("#comments").prepend("<%= escape_javascript render(@comment) %>");  
$('#comments_count').html('<%= pluralize(@comment.image.comments.count, "Comment") %>');  
$("#comment_body").val("");
$("#comments .comment_body:first").effect("highlight", { color:"#D3ECF4"}, 3000);

here you specify what should be done to update the view on success.

in your controller you can just use:

  def create
    @comment = Comment.create!(params[:comment])  
  end

and for the view something like:

<div id="comments">
    <%= render @comments %>
</div>


<% form_for [@image, Comment.new], :remote => true  do |f| %>
 <%= render 'comment_fields', :f => f %>
<% end %>

supposed you want to comment on an image.

my _comment_fields.html.erb partial then looks like this:

<p id="new_comment" class="add_comment">
  <%= f.hidden_field :user_id, :value => current_user.id %>
  <%= f.hidden_field :image_id, :value => @image.id %>
  <%= f.label :body, "leave a comment" %><br />
  <%= f.text_area :body, :rows => 5, :cols => 25 %>
</p>

<p>
  <%= f.submit "Add Comment" %>
</p>

This is rails' way to handle javascript unobstrusively. A good ressource on this is this screencast.

answered Jul 3, 2011 at 15:03

tmaximini

8,4937 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Elliot Over a year ago

Hi Frank, I'm trying this now - it seems to work posting the comment successfully, and in firebug it looks like it gets the page successfully too - but the page itself doesn't update with the new content. Any ideas?

tmaximini Over a year ago

the updating of the site itself is what happens in your app/views/comments/create.js.erb - in my example above I prepend the new comment to the #comments div, update the counter and clear the form... you need to adjust to your view structure. Post your create.js.erb file then it's easier to help probably.

Elliot Over a year ago

Updated my question entirely based on your answer :)

tmaximini Over a year ago

try $("#commentsPartial").prepend("<%= escape_javascript(render(@comment)) %>");

Elliot Over a year ago

Same result - page doesnt change - but the requests seem to work in firebug

|

Collectives™ on Stack Overflow

Ajax submit form, rails3

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related