使用复选框，AJAX，jQuery的更改属性 [英] Change attribute using checkbox, AJAX, jQuery

问题描述

我想改变这取决于阉复选框，我的任务资源的布尔属性被选中与否。我坚持，因为我不知道该怎么办......我加入这个AJAX复选框工作，整个CRUD，一切测试使用RSpec和水豚和自举前的一切。我有以下的code ...

的意见/任务/ show.html.erb

  27＆LT;％=的form_for [@project，@task]：远程=＆GT;真做| F | ％＆GT;
 28和;％= f.label：完成％＆GT;
 29＆LT;％= f.check_box：完成％＆GT;
 30℃;％结束％GT;
 

本：已完成的任务的布尔属性

的JavaScript / tasks.js.coffee

  8 jQuery的 - ＆GT;
  9 $（'＃task_completed）结合'变'，（事件）=＆GT;
 10 $。员额（）
 

不知道如何完成这个$。员额（）的东西，以及如何使code控制器工作......到目前为止，我只有这...

控制器/ tasks_controller.rb

  1级TasksController＆LT;的ApplicationController
  2
  3的before_filter：的authenticate_user！
  4的before_filter：find_project_from_project_id
  5的before_filter：find_task，：只=＆GT; [：显​​示，编辑，：更新]
  6
  7高清节目
  8 @title = @ task.name
  9月底，
 10
 11高清新
 12 @title ='新任务'
 13 @task = @ p​​roject.tasks.build
 14月底
 15
 16 DEF创建
 17 @task = @ p​​roject.tasks.build（PARAMS [：任务]）
 18，如果@ task.save
 19 current_user.tasks.push（@task）
 20 redirect_to时[@project，@task]：通知=＆GT; 任务创建
 21其他
 22渲染新
 23 flash.now [：警惕] ='任务不是创造
 24月底
 25月底
 26
 27高清编辑
 28 @title ='编辑任务
 29月底
 三十
 31 DEF更新
 32，如果@ task.update_attributes（PARAMS [：任务]）
 33 redirect_to时[@project，@task]：通知=＆GT; 任务更新
 34其他
 35渲染编辑
 36 flash.now [：警惕] ='任务没有更新
 37月底
 38月底
 39
 40私有
 41 #controller不会对这些方法的行为作出反应
 42
 43 DEF find_project_from_project_id
 44 @project = current_user.projects.find（PARAMS [：PROJECT_ID]）
 45救援的ActiveRecord :: RecordNotFound
 46 redirect_to时projects_path
 47闪光[：警惕] ='项目你要找的人找不到
 48月底
 49
 50 DEF find_task
 51 @task = @ p​​roject.tasks.find（PARAMS [：ID]）
 52救援的ActiveRecord :: RecordNotFound
 53 redirect_to时project_path（@project）
 54闪光[：警惕] ='你要找的工作找不到
 55月底
 56
 57月底
 

此外，对于那些谁想要更多...如何编写测试这个东西？我应该把它们写在所有的呢？的

编辑：经研究，我发现，人们正在做这样的...这是要走的路？经检查元素，我可以看到新的请求，目前正在当我改变的复选框，但布尔仍假...

  8 jQuery的 - ＆GT;
  9 $（'＃task_completed）结合'变'，（事件）=＆GT;
 10 $（'＃task_completed）父母（'形式：一是）。提交（）
 11 $（'。task_headline'）。toggleClass（'completed_task'）
 

解决方案

这是不是一个完美的解决方案在很多方面，但它的工作原理：）

show.html.erb

 ＆LT;脚本＆GT;
window.monitorTaskCompletion（1,1）
＆LT; / SCRIPT＆GT;
 

tasks.coffee

  window.monitorTaskCompletion =（PROJECT_ID，TASK_ID） - ＆GT;
    jQuery的 - ＆GT;
      $（'＃task_completed）结合'变'，（事件）=＆GT;
        $就
          网址：/项目/＃{} PROJECT_ID /任务/＃{} TASK_ID /完成
          数据：{完成：如果$（'＃task_completed）是（：选中），那么1，否则0}
          键入：PUT
 

tasks_controller.rb

 高清完成
  @completed = PARAMS [：完成] .to_i＆GT; 0
  @ task.complete（@completed）
  respond_to代码：JS
结束
 

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 %>

This :completed is the boolean attribute of the Task.

javascripts/tasks.js.coffee

  8 jQuery ->
  9   $('#task_completed').bind 'change', (event) =>
 10     $.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

Also, for those who want more... How to write tests for this thing? And should I write them at all for this?

EDIT: 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的更改属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！