使用复选框、AJAX、jQuery 更改属性

问题描述

我希望根据是否选中复选框来更改我的任务资源的布尔属性.我被卡住了，因为我不知道该怎么做......在添加这个 AJAX 复选框之前我已经拥有了一切，整个 CRUD，一切都用 rspec 和 capybara 测试并引导.我有以下代码...

I wish to change the boolean attribute of my Task resource depending on wether checkbox is checked or not. I am stuck as I don't know what to do... I have everything before adding this AJAX checkbox working, whole CRUD, everything tested with rspec and capybara and bootstrapped. I have the following code...

views/tasks/show.html.erb

 27      <%= form_for [@project, @task], :remote => true do |f| %>
 28        <%= f.label :completed %>       
 29        <%= f.check_box :completed %>
 30      <% end %>

这个 :completed 是任务的布尔属性.

This :completed is the boolean attribute of the Task.

javascripts/tasks.js.coffee

  8 jQuery ->
  9   $('#task_completed').bind 'change', (event) =>
 10     $.post()

不知道如何完成这个 $.post() 事情以及如何使控制器中的代码工作......到目前为止我只有这个......

Dont know how to finish this $.post() thing and how to make code in the controller work... So far I only have this...

controllers/tasks_controller.rb

 1 class TasksController < ApplicationController
  2 
  3   before_filter :authenticate_user!
  4   before_filter :find_project_from_project_id
  5   before_filter :find_task, :only => [:show, :edit, :update]
  6 
  7   def show
  8     @title = @task.name
  9   end
 10 
 11   def new
 12     @title = 'New task'
 13     @task = @project.tasks.build
 14   end
 15 
 16   def create
 17     @task = @project.tasks.build(params[:task])
 18     if @task.save
 19       current_user.tasks.push(@task)
 20       redirect_to [@project, @task], :notice => 'Task created'
 21     else
 22       render 'new'
 23       flash.now[:alert] = 'Task not created'
 24     end
 25   end 
 26     
 27   def edit 
 28     @title = 'Edit task'
 29   end 
 30   
 31   def update
 32     if @task.update_attributes(params[:task])
 33       redirect_to [@project, @task], :notice => 'Task updated'
 34     else
 35       render 'edit'
 36       flash.now[:alert] = 'Task not updated'
 37     end
 38   end 
 39 
 40   private
 41   #controller doesn't respond to these methods as actions
 42   
 43   def find_project_from_project_id
 44     @project = current_user.projects.find(params[:project_id])
 45     rescue ActiveRecord::RecordNotFound
 46       redirect_to projects_path
 47       flash[:alert] = 'Project you were looking for could not be found'
 48   end
 49 
 50   def find_task
 51     @task = @project.tasks.find(params[:id])
 52     rescue ActiveRecord::RecordNotFound
 53       redirect_to project_path(@project)
 54       flash[:alert] = 'Task you were looking for could not be found'
 55   end
 56 
 57 end

另外，对于那些想要更多的人......如何为这个东西编写测试?我应该为此写它们吗?

经过研究，我发现人们正在这样做......这是要走的路吗?在检查元素时，我可以看到当我更改复选框时正在发出新的请求，但布尔值仍然是错误的......

Upon research, I found people are doing it like this... Is this the way to go? Upon inspecting element I can see new requests are being made when i change the checkbox, but the boolean still remains false...

  8 jQuery ->
  9   $('#task_completed').bind 'change', (event) =>
 10     $('#task_completed').parents('form:first').submit()
 11     $('.task_headline').toggleClass('completed_task')

推荐答案

这在很多方面都不是一个优雅的解决方案，但它确实有效:)

This is not an elegant solution in so many ways, but it works :)

show.html.erb

<script>
window.monitorTaskCompletion(1,1)
</script>

tasks.coffee

window.monitorTaskCompletion = (project_id, task_id)  ->
    jQuery ->
      $('#task_completed').bind 'change', (event) =>
        $.ajax
          url: "/projects/#{project_id}/tasks/#{task_id}/complete"
          data: {completed: if $('#task_completed').is(':checked') then 1 else 0}
          type: "PUT"

tasks_controller.rb

def complete
  @completed = params[:completed].to_i > 0
  @task.complete(@completed)
  respond_to :js
end

这篇关于使用复选框、AJAX、jQuery 更改属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！