javascript - 每个循环内表单上的 Rails Ajax 具有嵌套资源和 html 类

Question

因此，我尝试在目标内创建任务列表，为了完成它们，我创建了一个带有隐藏字段的 form_for，该隐藏字段将在单击提交时更新每个任务记录的值。我正在尝试将 ajax 添加到表单中，以便当用户点击提交时，它将更新任务的记录，并呈现一个部分，用一个 div 表示“完成!”来替换此表单。

goals_controller.rb

def show
  @goal = Goal.where(user_id: current_user, id: params[:id]).first
  @goal_tasks = @goal.tasks

  # This is where the AJAX request will happen
  respond_to do |format|
    format.html {}
    format.js {}
  end
end

show.html.erb 目标

    <% @goal_tasks.each do |task| %>
        <div class="complete-button">
            <% if task.completed == false %>
                <%= form_for([@goal,task], remote: true) do |f| %>
                    <%= f.hidden_field :completed , :value => true %>
                    <%= f.submit "Complete" , :class => "submit-complete" %>
                <% end %>
            <% else %>
                <%= render partial: "goals/taskcompleted"  %>
            <% end %>
        <div>
    <% end %>

show.js.erb

$(".complete-button").html("<%= j(render partial: 'goals/taskcompleted') %>")

正在发生的行为是，如果有多个任务，则有多个具有唯一 id="edit_task_unique_id" 的表单。在 html 中，但因为我正在抓取 .complete-button show.js.erb 中的类。它将所有形式替换为完整的 div。我试图以某种方式获取表单为每个任务创建的唯一 ID，但没有成功。任何帮助或反馈表示赞赏!

Answer 1

Show是GET类型，你所做的是PUT类型。您可以使用更新方法或创建自定义方法。您甚至不需要表单，因为您不希望用户输入任何内容。最重要的是，我将使用 :completed_at 字段和 datetime 类型。如果为 nil，则未完成，如果不为 nil(有日期时间)，则已完成。

路线.rb

resources :goals do
  resources :tasks do
    member do
      patch :complete
    end
  end
end

目标/show.html.erb

 ....
 <%= render @tasks %> # this is a rails convention. Basically it iterates thru the @tasks and renders each task based on _task.html.erb which represents a single task.
 ....

任务/_task.html.erb

#You use task instead of @task as you do within a @tasks.each |task| do block.

<%= task.name %>
<%= task.content %>
<% if task.completed_at.nil? %>
  #here you only need to pass task.id to the path (rails convention again)
  <%= link_to "Complete Task", complete_goal_task_path(id: task.id), action: :complete, remote: true, method: :patch %>
<% end %>

目标 Controller

def show
  # I don't know why you wrote this:
  @goal = Goal.where(user_id: current_user, id: params[:id]).first
  #It should be just this since you are on the show page (You should define the current_user in the view link helper that takes the user on this page.)
  @goal = Goal.find(params[:id])
  @tasks = @goal.tasks
end

任务 Controller

def complete
  @task = Task.find(params[:id])
  @task.update_attribute(:completed_at, Time.zone.now)
  respond_to do |format|
    format.html
    format.js
  end
end

任务/complete.js.erb

//You remove the completed task from the DOM (I guess you wanna do that.)
$("#task_<%= @task.id %>").fadeOut(400, function(){
  $(this).remove();
});
//For flash checkout a stackoverflow question. Something like "how to use flash in js.erb"

架构.rb

create_table "tasks", force: :cascade do |t|
  t.integer  "goal_id",  null: false
  t.string   "name"
  t.text     "content",      null: false
  t.datetime "deadline",     null: false
  t.datetime "completed_at"
  t.datetime "created_at",   null: false
  t.datetime "updated_at",   null: false
end