javascript - Rails 5.2 AJAX 与部分产生 JS 控制台错误

Question

我正在尝试创建一个带有可单击复选框的任务列表，单击该复选框时将使用 AJAX。一切都正确呈现，但是当单击时，我收到以下两个 JS 控制台错误:

• 提取脚本时收到错误的 HTTP 响应代码 (404)。
• “发布 http://localhost:3000/tasks/1/task_uncomplete 500(内部服务器错误)”

这是我的tasks_controller.rb方法:

  def task_complete
    @task = Task.find(params[:id])
    if @task.update_attributes(completed: true)
      respond_to do |format|
        format.js
        format.html
      end
    else
      redirect_to redirect_back(fallback_location: tasks_path(@task))
      flash[:warning] = "Oops! Something went wrong!"
    end
  end



  def task_uncomplete
    @task = Task.find(params[:id])
    if @task.update_attributes(completed: false)
      respond_to do |format|
        format.js
        format.html
      end
    else
      redirect_to redirect_back(fallback_location: tasks_path(@task))
      flash[:warning] = "Oops! Something went wrong!"
    end
  end

这是部分内容的所在:

    <div class="col-sm-6 col-md-4">
      <h2 class="orange-text font-weight-bold">My Tasks</h2>
      <% tasks = Task.where(area_id: @area.id) %>
        <div id="tasks-list">
          <%= render partial: 'tasks/tasks-list', locals: { tasks: tasks } %>
        </div>
    </div> <!-- goals col -->

这是tasks/_tasks-list.html.erb部分:

<ul class="mb-0">
  <% tasks.each do |task| %>
    <% if task.completed %>
      <%= link_to task_uncomplete_path(task), method: :post, remote: true do %>
        <i class="far fa-check-square black-text" style="margin: 0 4px 0 -21px "></i>
      <% end %>
      <%= link_to task.name, task_path(task), class: "black-text" %>
    <% else %>
      <%= link_to task_complete_path(task), method: :post, remote: true do %>
        <i class="far fa-square black-text" style="margin: 0 4px 0 -21px "></i>
      <% end %>
      <%= link_to task.name, task_path(task), class: "black-text" %>
    <% end %>
  <% end %>
  <%= link_to "+&nbsp;&nbsp;Create a New Task".html_safe, new_task_path, class: "orange-text", style: "margin-left: -19px" %>
</ul>

这里是 task_complete.js.erb 和 task_uncomplete.js.erb (两者相同):

$("#tasks-list").html("<%= escape_javascript(render partial: 'tasks-list', locals: { tasks: tasks }) %>")

最后，这是我的相关 routes.rb 路径:

  resources :tasks
  post "tasks/:id/task_complete" => "tasks#task_complete", as: "task_complete"
  post "tasks/:id/task_uncomplete" => "tasks#task_uncomplete", as: "task_uncomplete"

有人能看出我哪里出错了吗？

更新

根据两个潜在答案的建议，我对其进行了更新，以便在 areas_controller 中定义 @tasks，如下所示:

  # GET /areas/1
  # GET /areas/1.json
  def show
    @goals = Goal.where(area_id: @area.id)
    @projects = Project.where(area_id: @area.id)
    @milestones = Milestone.where(area_id: @area.id)
    @tasks = Task.where(area_id: @area.id)
    @steps = Step.where(area_id: @area.id)
  end

部分现在看起来像这样:

<ul class="mb-0">
  <% @tasks.each do |task| %>
    <% if task.completed %>
      <%= link_to task_uncomplete_path(task), method: :post, remote: true do %>
        <i class="far fa-check-square black-text" style="margin: 0 4px 0 -21px "></i>
      <% end %>
      <%= link_to task.name, task_path(task), class: "black-text" %>
    <% else %>
      <%= link_to task_complete_path(task), method: :post, remote: true do %>
        <i class="far fa-square black-text" style="margin: 0 4px 0 -21px "></i>
      <% end %>
      <%= link_to task.name, task_path(task), class: "black-text" %>
    <% end %>
    <br>
  <% end %>
  <%= link_to "+&nbsp;&nbsp;Create a New Task".html_safe, new_task_path, class: "orange-text", style: "margin-left: -19px" %>
</ul>

更新后的 task_complete.js.erb 和 task_uncomplete.js.erb (两者仍然相同)如下:

$("#tasks-list").html("<%= escape_javascript(render partial: 'tasks-list', locals: { tasks: @tasks }) %>")

页面随着更新正确呈现，但我仍然有相同的行为(它不会异步更新，但在刷新页面时会更新)和以下控制台错误:

POST http://localhost:3000/tasks/1/task_complete 500 (Internal Server Error)

有什么想法吗？

Answer 1

您的task_uncomplete.js.erb和task_complete.js.erb没有定义名为tasks或@tasks的实例变量。

如果你看到你的部分。在这里

<%= render partial: 'tasks/tasks-list', locals: { tasks: tasks } %>

您有使用

定义的任务

<% tasks = Task.where(area_id: @area.id) %>

其中 Ajax 调用没有 @tasks 或任务。您需要在渲染之前在 Controller 或 js.erb 中定义它。要定义@tasks，我知道你需要区域。您需要在整个 ajax 调用过程中保留面积值