使用复选框,AJAX,jQuery的更改属性(Change attribute using chec

2019-07-29 10:54发布

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

意见/任务/ show.html.erb

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

这:是完成任务的布尔属性。

Java脚本/ tasks.js.coffee

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

不知道如何完成这个$。员额()的东西,以及如何使控制器工作代码......到目前为止,我只有这...

控制器/ 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

此外,对于那些谁想要更多...如何写这个东西的测试? 我应该写他们在所有的呢?

编辑:经研究,我发现人们都在做它像这样......这是要走的路? 在检查元素,我可以看到当我改变的复选框正在作出新的请求,但布尔仍然假...

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

Answer 1:

这是不是在很多方面一个很好的解决方案,但它的工作原理:)

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


Answer 2:

你是不是提供的属性到$ .post的动作。

尽量让这样的事情:

$('#task_completed').bind('change', function() {
    var url = $(this).closest('form').attr('action');
    var data = {};
    data.task = {};
    data.task.completed = $(this).is(':checked'); 
    $.post({
        url: url,
        data: data
    });
});

这将使您需要的功能,当你在IRC房间说明了我。 至于如果复选框被选中的复选框值仅发送,我们要设置复选框是否被选中或不是自定义布尔值(由$(本)。是(实现“:检查”)函数)。

检查使用萤火虫或铬/歌剧/ Safari浏览器检查器中的AJAX请求。 你可以在$。员额功能添加更多的功能,如功能的完整的事件。 看看到jQuery的文档有关Ajax和.post的$函数:

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/jQuery.post/



Answer 3:

由于这是一个Ajax动作,你需要在控制器不同的方式处理它比你通常会。

def update
  if @task.update_attributes(params[:task])
    @notice = 'Task updated'
  else
    @notice = 'Task not updated'
  end
end 

而在一个update.js.erb来看,是这样的:

$(#notice).html('<%= @notice %>')

在jQuery的。员额(),你也真的应该指定的URL,并包括数据参数,如先前建议。



文章来源: Change attribute using checkbox, AJAX, jQuery