javascript - rails 4 : custom action to update only one param with AJAX

Question

在我的 Rails 4 应用程序中，我有一个 Calendar 和一个 Post 模型，使用 shallow 路由:

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

日历has_many帖子和帖子belong_to日历。

我已经在 post show.html.erb View 中的 Posts#Update 操作上使用 AJAX 调用来更新自定义:approval 帖子参数:

• 我有respond_to do |format| format.js end 在我的 Posts#Update Controller
• 我在 app/views/posts/ 中有一个 update.js.erb View ，用于重新加载帖子的相应部分 show.html.erb 查看
• 当然，我的链接设置为 remote: true

现在，我需要实现类似的功能，以更新帖子的自定义 :approval 参数，但来自 calendar show.html.erb 查看所有帖子的显示位置。

这就是我的日历 show.html.erb View 中当前的内容:

<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"), 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"), 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"), remote: true, :method => :patch do %>
    <span class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="left" title="To Be Deleted"></span>
  <% end %>
  </span>
</td>

此代码允许我实际更新 calendar show.html.erb 中的帖子自定义 :approval 参数。

但我不知道如何重新加载页面，或者更好的是，只需重新加载链接所在的 post_approval_section td 即可。

我无法重复使用与 post show.html.erb 上使用的完全相同的方法，因为我已经有了 Posts# 的 JS 响应更新操作设置。

我怎样才能做到这一点？

—————

更新:根据 Long Nguyen 的回答，这就是我现在所在的位置。

#calendars/show.html.erb and 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"), remote: true, approval_update: 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"), remote: true, approval_update: 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"), remote: true, approval_update: true, :method => :patch do %>
    <span class="glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="left" title="To Be Deleted"></span>
  <% end %>
  </span>
</td>

#posts_controller.rb

def update
    if params["approval_update"]
      respond_to do |format|
        format.js { render :action => "update_post_approval" }
      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

#update_post_approval.js.erb

$('td.post_approval_section').html('<%= j render(partial: "calendars/post_approval") %>');

当我点击其中一个链接来更新帖子批准时，浏览器中没有任何反应。

但是，在 log/development.log 中，我有:

Started PATCH "/posts/42?post%5Bapproval%5D=edit" for ::1 at 2015-11-19 19:59:51 -0800
Processing by PostsController#update as JS
  Parameters: {"post"=>{"approval"=>"edit"}, "id"=>"42"}
  [1m[36mUser Load (1.1ms)[0m  [1mSELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1[0m  [["id", 1]]
  [1m[35mPost Load (2.2ms)[0m  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = $1 LIMIT 1  [["id", 42]]
  [1m[36m (1.1ms)[0m  [1mBEGIN[0m
  [1m[35mSQL (1.1ms)[0m  UPDATE "posts" SET "approval" = $1, "updated_at" = $2 WHERE "posts"."id" = $3  [["approval", "edit"], ["updated_at", "2015-11-20 03:59:51.203371"], ["id", 42]]
  [1m[36mSQL (3.6ms)[0m  [1mINSERT INTO "versions" ("event", "object", "whodunnit", "created_at", "object_changes", "item_id", "item_type") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id"[0m  [["event", "update"], ["object", "---\nid: 42\ncalendar_id: 8\ndate: 2015-11-19 20:19:00.000000000 Z\nsubject: Armistice 2\nformat: Image\ncopy: Joyeux 11 novembre tout le monde. ++\ncreated_at: 2015-11-19 20:19:58.244685000 Z\nupdated_at: 2015-11-20 03:59:44.073894000 Z\nimage_file_name: armistice.jpg\nimage_content_type: image/jpeg\nimage_file_size: 35967\nimage_updated_at: 2015-11-19 20:19:57.792047000 Z\nshort_copy: etg'tg' <<\nscore: \nfacebook: true\ntwitter: true\ninstagram: false\npinterest: false\ngoogle: false\nlinkedin: false\ntumblr: \nsnapchat: \napproval: ok\n"], ["whodunnit", "1"], ["created_at", "2015-11-20 03:59:51.203371"], ["object_changes", "---\napproval:\n- ok\n- edit\nupdated_at:\n- 2015-11-20 03:59:44.073894000 Z\n- 2015-11-20 03:59:51.203371000 Z\n"], ["item_id", 42], ["item_type", "Post"]]
  [1m[35m (2.0ms)[0m  COMMIT
  Rendered posts/_approval.html.erb (0.6ms)
  Rendered posts/update.js.erb (2.1ms)
Completed 200 OK in 59ms (Views: 10.9ms | ActiveRecord: 11.1ms)

我在这里做错了什么？

—————

Answer 1

我想出了两个想法来处理这种情况:

第一种方法:当您从 calendar show.html.erb 更新帖子时传递另一个参数，因此 link_to 将是:

<%= link_to post_path(:id => post.id, "post[approval]" => "remove", approval_update: true), remote: true, :method => :patch do %>

然后在 Post Controller 的 update 操作中，您可以通过 approval_update 参数过滤此请求:

if params["approval_update"]
  respond_to do |format|
    format.js { render :action => "update_post_approval" }
  end
else
  respond_to do |format|
  ...
  end
end

现在，当您从 Calendar show.html.erb 更新帖子时，帖子 Controller 将加载 RAILS_ROOT/app/views/posts/update_post_approval.js.erb 而不是 update.js.erb

第二种方式:创建另一个路由来更新Post的审批属性，这意味着您还将在Post Controller 中创建另一个操作来处​​理日历 页。