Rails 4:使用AJAX调用更新模型属性
Rails 4: update model attribute with AJAX call
这是Rails 4上的后续问题:使用AJAX和Rails 4只更新一个参数的自定义操作:选择具有动态生成id的DOM元素。
我不知道如何从我得到的好答案中找到答案,所以我想从头开始
在我的Rails4应用程序中,我有一个Calendar
和Post
模型,用浅路由设置:
resources :calendars do
resources :posts, shallow: true
end
日历has_many
帖子和帖子belong_to
是日历。
在日历show.html.erb
视图中,我显示属于某个日历的所有帖子。
从这个日历show.html.erb
视图中,我需要使用AJAX调用来更新帖子的:approvement参数,以便只刷新与该特定帖子的:approval相关的DOM元素,而不是整个页面。
这是日历show.html.erb
中允许我更新帖子的:approval
的代码部分:
<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>
然后,在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
注意:这里,我不能使用默认的Posts#Update
操作,因为它已经被另一个AJAX调用用于从后show.html.erb
视图更新:approval
参数,这就是我们呈现update_post_approval
自定义操作的原因。
然后,我有以下app/views/posts/update_post_approval.js.erb
文件:
$("tr#post_row_#{post.id} > td.post_approval_section").html('<%= j render(partial: "calendars/post_approval") %>');
最后,我有以下calendars/_post_approval.html.erb
部分:
<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>
当我单击<td class="cell_content_center post_approval_section">
部分中的三个链接之一来更新后:approval
参数时,该参数实际上已经更新,正如我们在服务器日志中看到的:
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)
但是,除非手动刷新页面,否则视图不会发生任何更改。
我现在已经花了几个小时在这个问题上,不知道这个问题是由Ruby还是JS代码引起的。
如果有必要,我很乐意分享更多的代码。
你知道我在这里做错了什么吗?
错误就在这里:
$("tr#post_row_#{post.id}td.post_approvel_section").html('<%=j render(partial:"calendars/post_approval")%>')
更新应该是:
$("tr#post_row_<%= @post.id %> > td.post_approval_section").html('<%= j render(partial: "calendars/post_approval", locals: {post: @post}) %>');
- 视图ngValue-Angular JS中未更新模型的更改
- 需要使用触摸屏从 AngularJS 指令中更新模型
- 角度指令没有更新模型视图
- 复选框仅在第二次单击后更新模型
- Angular.js-Socket.io事件更新模型,而不是视图
- UI Select在删除后不会更新模型
- 为什么ng提交没有提交和更新模型
- AngularJS-基于URL更新模型
- 视图更改时,Ember.js更新模型
- Knockoutjs函数更新模型时应出现异常
- 挖空绑定不会更新模型
- 范围不更新模型中的更改
- 导航时更新模型变量
- 角度.js更新模型
- Ember.js不更新模型
- 在使用挖空自定义绑定时更新模型时更新元素
- 在自我更新时以ng重复更新模型
- 如何在主干中对列表进行排序时更新模型的顺序属性
- AngularJS 复选框不更新模型
- 更新模型中的数据不会绑定到控制器