Thibaud Clement Thibaud Clement - 5 months ago 16
Javascript Question

Rails 4: update model attribute with AJAX call

This is a follow-up question on Rails 4: custom action to update only one param with AJAX and Rails 4: select DOM element with dynamically generated id.

I can't figure out how to make things work from the good answers I got, so I would like to start again from a blank slate.

In my Rails 4 app, I have a

Calendar
and a
Post
models, set up with shallow routes:

resources :calendars do
resources :posts, shallow: true
end


A calendar
has_many
post and a post
belong_to
a calendar.

In the calendar
show.html.erb
view, I display all the posts that belong to a calendar.

From this calendar
show.html.erb
view, I need to update the :approval param of a post, with an AJAX call, so that only the DOM element related to the :approval of this particular post is refreshed, not the entire page.

This is the part of the code in calendar
show.html.erb
that allows me to update the
:approval
of a post:

<tr id="post_row_<%= post.id%>">
[...] # Truncated for brivety
<td class="cell_content_center post_approval_section">
<% if post.approval == "ok" %>
<span class="ok_green">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "ok", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-ok" data-toggle="tooltip" data-placement="left" title="Approve Post"></span>
<% end %>
</span><br/>
<% if post.approval == "edit" %>
<span class="edit_yellow">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "edit", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-repeat" data-toggle="tooltip" data-placement="left" title="Require Edits"></span>
<% end %>
</span><br/>
<% if post.approval == "remove" %>
<span class="remove_red">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "remove", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="left" title="To Be Deleted"></span>
<% end %>
</span>
</td>
[...] # Truncated for brivety
</tr>


Then, in
posts_controller.rb
:

def update
if params["approval_update"]
respond_to do |format|
if @post.update(post_params)
format.js { render :action => "update_post_approval" }
else
format.html { redirect_to :back }
end
end
else
respond_to do |format|
if @post.update(post_params)
format.html { redirect_to post_path(@post) }
format.json { render :show, status: :ok, location: @post }
format.js
else
format.html { render :edit }
format.json { render json: @post.errors, status: :unprocessable_entity }
end
end
end
end

def update_post_approval
respond_to do |format|
format.js
end
end


Note: here, I cannot use the default
Posts#Update
action, since it is already used by another AJAX call to update the
:approval
param from the post
show.html.erb
view, which the reason why we render the
update_post_approval
custom action.

Then, I have the following
app/views/posts/update_post_approval.js.erb
file:

$("tr#post_row_#{post.id} > td.post_approval_section").html('<%= j render(partial: "calendars/post_approval") %>');


Finally, I have the following
calendars/_post_approval.html.erb
partial:

<td class="cell_content_center post_approval_section">
<% if post.approval == "ok" %>
<span class="ok_green">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "ok", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-ok" data-toggle="tooltip" data-placement="left" title="Approve Post"></span>
<% end %>
</span><br/>
<% if post.approval == "edit" %>
<span class="edit_yellow">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "edit", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-repeat" data-toggle="tooltip" data-placement="left" title="Require Edits"></span>
<% end %>
</span><br/>
<% if post.approval == "remove" %>
<span class="remove_red">
<% else %>
<span class="approval_blue" %>
<% end %>
<%= link_to post_path(:id => post.id, "post[approval]" => "remove", approval_update: true), remote: true, :method => :patch do %>
<span class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="left" title="To Be Deleted"></span>
<% end %>
</span>
</td>


When I click one of the three links in the
<td class="cell_content_center post_approval_section">
section to update a post
:approval
param, the param is actually updated, as we can see in the server logs:

Started PATCH "/posts/38?approval_update=true&post%5Bapproval%5D=ok" for ::1 at 2015-11-20 08:03:50 -0800
Processing by PostsController#update as JS
Parameters: {"approval_update"=>"true", "post"=>{"approval"=>"ok"}, "id"=>"38"}
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT 1 [["id", 1]]
Post Load (0.7ms) SELECT "posts".* FROM "posts" WHERE "posts"."id" = $1 LIMIT 1 [["id", 38]]
(0.6ms) BEGIN
SQL (1.1ms) UPDATE "posts" SET "approval" = $1, "updated_at" = $2 WHERE "posts"."id" = $3 [["approval", "ok"], ["updated_at", "2015-11-20 16:03:50.888587"], ["id", 38]]
SQL (1.3ms) INSERT INTO "versions" ("event", "object", "whodunnit", "created_at", "object_changes", "item_id", "item_type") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id" [["event", "update"], ["object", "---\nid: 38\ncalendar_id: 6\ndate: 2015-11-17 22:09:00.000000000 Z\nsubject: Subject\nformat: Link\ncopy: https://www.wid.la/\ncreated_at: 2015-11-17 22:09:28.713416000 Z\nupdated_at: 2015-11-20 16:03:20.613597000 Z\nimage_file_name: \nimage_content_type: \nimage_file_size: \nimage_updated_at: \nshort_copy: ''\nscore: \nfacebook: true\ntwitter: false\ninstagram: false\npinterest: false\ngoogle: false\nlinkedin: false\ntumblr: \nsnapchat: \napproval: remove\n"], ["whodunnit", "1"], ["created_at", "2015-11-20 16:03:50.888587"], ["object_changes", "---\napproval:\n- remove\n- ok\nupdated_at:\n- 2015-11-20 16:03:20.613597000 Z\n- 2015-11-20 16:03:50.888587000 Z\n"], ["item_id", 38], ["item_type", "Post"]]
(1.6ms) COMMIT
Rendered calendars/_post_approval.html.erb (0.1ms)
Rendered posts/update_post_approval.js.erb (1.5ms)
Completed 200 OK in 27ms (Views: 9.9ms | ActiveRecord: 6.3ms)


However, unless I manually refresh the page, nothing changes on the view.

I have now spent hours on this issue and can't figure out whether the issue is caused by the Ruby or the JS code.

If necessary, I am happy to share more code.

Any idea of what I am doing wrong here?

Answer

The mistake is here:

$("tr#post_row_#{post.id} > td.post_approval_section").html('<%= j render(partial: "calendars/post_approval") %>');

Updated It should be:

$("tr#post_row_<%= @post.id %> > td.post_approval_section").html('<%= j render(partial: "calendars/post_approval", locals: {post: @post}) %>');
Comments