带有check_box_tag的Rails AJAX在单击时抛出404错误

Question

This is my first time working with Rails' AJAX helpers. I got AJAX delete to work fine with remote true but the problem I'm having now is with check_box_tag. With the help of a few other SO Q&A's I'm trying to setup a pretty basic ToDo List where each task has a checkbox. When a user clicks the checkbox it is supposed to send an AJAX PUT request through a method called 'completed' and updates the corresponding database column for that task, with true or false, then render nothing.

So there are two issues I'm running into:
Right now the database isn't updating and in Chrome console it's showing a 404 error when I click a checkbox.

Stacktrace is showing 'Couldn't find Project with id=undefined':

Started PUT "/projects/undefined/tasks/61/completed/" for 127.0.0.1 at 2013-06-10 16:55:55 -0500
Processing by TasksController#completed as HTML
Parameters: {"id"=>"61", "completed"=>"true", "project_id"=>"undefined"}
Project Load (0.2ms)  SELECT "projects".* FROM "projects" WHERE "projects"."id" = ? LIMIT 1  [["id", "undefined"]]
Completed 404 Not Found in 3ms

ActiveRecord::RecordNotFound (Couldn't find Project with id=undefined):
app/controllers/tasks_controller.rb:68:in `completed'

I'm using nested resources since Projects have many Tasks through ProjectTasks, etc., so I'm wondering if the issue is somewhere in this area. My custom route matches the same format as the other routes so I'm confused why it's undefined and the ajax callback isn't processing.

routes.rb:

resources :projects do
  resources :tasks
end

put 'projects/:project_id/tasks/:id/completed' => 'tasks#completed'

rake routes:

root        /                                                   projects#index
project_tasks GET    /projects/:project_id/tasks(.:format)               tasks#index
              POST   /projects/:project_id/tasks(.:format)               tasks#create
new_project_task GET    /projects/:project_id/tasks/new(.:format)           tasks#new
edit_project_task GET    /projects/:project_id/tasks/:id/edit(.:format)      tasks#edit
project_task GET    /projects/:project_id/tasks/:id(.:format)           tasks#show
              PUT    /projects/:project_id/tasks/:id(.:format)           tasks#update
              DELETE /projects/:project_id/tasks/:id(.:format)           tasks#destroy
projects GET    /projects(.:format)                                 projects#index
              POST   /projects(.:format)                                 projects#create
new_project GET    /projects/new(.:format)                             projects#new
edit_project GET    /projects/:id/edit(.:format)                        projects#edit
      project GET    /projects/:id(.:format)                             projects#show
              PUT    /projects/:id(.:format)                             projects#update
              DELETE /projects/:id(.:format)                             projects#destroy
              PUT    /projects/:project_id/tasks/:id/completed(.:format) tasks#completed

tasks_controller.rb:

def completed
  @project = Project.find(params[:project_id])
  @task = @project.tasks.find(params[:id])

  respond_to do |format|
    if @task.update_attributes(params[:task])
      format.html { redirect_to(project_tasks_path(@project.id)) }
      format.js   { render :nothing => true }
    end
  end
end

_task.html.erb:

<ul>
  <% @tasks.each do |task| %>
    <li>
      <%= check_box_tag task.id, task.completed ? 'false' : 'true', task.completed, :url => url_for(:action => 'completed', :id => task.id) %>
      <%= task.name %>
      <%= link_to 'Edit', edit_project_task_path(@project.id, task.id) %> |
      <%= link_to 'Delete', project_task_path(@project.id, task.id), confirm: "Are you sure you want to delete this task?", method: :delete, remote: true, class: 'delete_task' %>
    </li>
  <% end %>
</ul>

tasks.js.coffee:

$ ->
  $('input:checkbox').change ->
    checked = undefined
    if $(this).is(":checked")
      checked = true
    else
      checked = false
    $.ajax
      type: "PUT"
      url: "/projects/" + $(this).attr('project_id') + "/tasks/" + $(this).attr('id') + "/completed/"
      dataType: "html"
      data:
        id: $(this).attr('id')
        completed: checked
      success: (data, textStatus, jqXHR) ->
        alert("Task has been marked as completed!")

$ ->
  $('input:checkbox').change ->
    if ( $(this).is(':checked') )
      $(this).parent().addClass('marked')
    else
      $(this).parent().removeClass('marked')

Any help in the right direction would be much appreciated.

Answer 1

I was able to figure this out. This might not be the cleanest Rails way, however. I needed to pass in the project id to the url, which was obvious early on and also used the data-url attribute to pass this information through to javascript.

_tasks.html.erb

<%= check_box_tag task.id, task.completed ? 'false' : 'true', task.completed, 'data-url' => url_for(:action => 'completed', :project_id => @project.id, :id => task.id) %>

Then assign it to a variable and return the url with .js. This resulted in fixing the 404 issue.

tasks.js.coffee

$ ->
  $('input:checkbox').change ->
    checked = undefined
    url = $(this).data("url")
    if $(this).is(":checked")
      checked = true
    else
      checked = false
    $.ajax
      type: "PUT"
      url: url + ".js"
      data:
        id: $(this).attr('id')
        completed: checked

For updating the database column via the completed method, I needed to reference the corresponding column.

tasks_controller.rb

def completed
  @project = Project.find(params[:project_id])
  @task = @project.tasks.find(params[:id])

  respond_to do |format|
    if @task.update_attributes(:completed => params[:completed])
      format.html { redirect_to(@task) }
      format.js   { render :nothing => true }
    end
  end
end

Now the task is marked as completed (true or false) in the database when a user checks or unchecks a checkbox, without the page refreshing.