Rails 5.2 AJAX с частичной ошибкой консоли JS

Question

Я пытаюсь создать список задач с активируемыми флажками, которые используют AJAX при нажатии.Все отображается правильно, но при нажатии я получаю две следующие ошибки консоли JS:

• При получении сценария получен неверный код ответа HTTP (404).
• "POST 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"

Кто-нибудь может увидеть, где я иду не так?

ОБНОВЛЕНИЕ

По советудва возможных ответа, я обновил его, чтобы @tasks было определено в areas_controller следующим образом:

  # 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 не задана переменная экземпляра с именем task или @tasks.

, если вы видите свою частичку.здесь

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

у вас есть задачи, определенные с

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

, где при вызове Ajax нет @ задач или задач.Вы должны определить это в контроллере или в js.erb перед рендерингом.чтобы определить @ задачи, я понимаю, вам нужна область.вам нужно сохранить значение площади на протяжении всего вызова ajax

Answer 2

Ошибка, кажется, исходит от этой части ваших задач task_complete.js.erb и task_uncomplete.js.erb.

... locals: { tasks: tasks })

не определена ... Я считаю, что это должна быть переменная экземпляра вашего контроллера.Может быть, вы хотели написать:

locals: { tasks: @tasks })