lundi 15 août 2016

Ajax request rails checkbox jquery UJS

So I have an app with projects and tasks,where task belongs_to project.I'm trying to change a boolean value of task is_active by clicking on a checkbox in my view.So I've made the checkbox:

<input type="checkbox" name="task" id="task" value="1" data-url="/tasks/"#{task.id} data-remote="true" data-method="post" class="task-check">

I've made a simple toggle action in my tasks controller:

  def toggle
    @task.toggle(:is_active)
  end

But when I'm clicking on a checkbox - I can see only the following error

jquery.self-660adc5….js?body=1:10246 
POST http://localhost:3000/tasks/ 404 (Not Found)send 
@ jquery.self-660adc5….js?body=1:10246ajax 
@ jquery.self-660adc5….js?body=1:9735ajax 
@ jquery_ujs.self-e87806d….js?body=1:94handleRemote 
@ jquery_ujs.self-e87806d….js?body=1:179(anonymous function) 
@ jquery_ujs.self-e87806d….js?body=1:472dispatch 
@ jquery.self-660adc5….js?body=1:5227elemData.handle 
@ jquery.self-660adc5….js?body=1:4879

I think params of the checkbox in my view are wrong, but can you please help me to find out what is wrong?

Here is my tasks_controller.rb

class TasksController < ApplicationController
  before_action :set_project
  before_action :set_task, only: [:show, :edit, :update, :destroy, :toggle]
  before_action :authenticate_user!


  def index
    @tasks = @project.tasks
  end

  def show
    #makes use of set_task
  end

  def new
    @task = @project.tasks.new
  end


  def edit
  end

  def references
    respond_to do |format|
      if @task.valid?
        format.html { redirect_to root_url }
        format.json { render :show, status: :created, location: @task }
      else
        format.html { render :home_url }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end

  def toggle
    @task.toggle(:is_active)
  end

  def create
    @task = @project.tasks.create(task_params)
    respond_to do |format|
      if @task.valid?
        format.html { redirect_to root_url }
        format.json { render :show, status: :created, location: @task }
      else
        format.html { render :home_url }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end


  def update
    @task = @project.tasks.update(task_params)
    respond_to do |format|
      if @task.update(task_params)
        format.html { redirect_to root_url }
        format.json { render :home_url, status: :ok, location: @task }
      else
        format.html { render :root_url }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end


  def destroy
    @task.destroy
    respond_to do |format|
      format.html { redirect_to root_url }
      format.json { head :no_content }
    end
  end

  private

  def set_project
    @project = current_user.projects.find(params[:project_id])
  end

  def set_task
    @task = @project.tasks.find(params[:id])
  end

  def task_params
    params.require(:task).permit(:deadline, :body, :project_id)
  end
end

And my view - projects/index.html.erb

<div class="container">
  <% @projects.each do |project| %>
  <div  class="projectblock">
    <div class="row project-bar">
      <div class="col-xs-12 ">
        <div class="col-xs-1">
          <span class="glyphicon glyphicon-list-alt"></span>
        </div>
        <div  class="col-xs-9 prname">
          <%= project.name %>
        </div>
        <div class="col-xs-1">
          <%= link_to edit_project_path(project) do %>
            <span class="glyphicon glyphicon-pencil"></span>
          <% end %>
        </div>
        <div class="col-xs-1">
          <span><%= link_to " ", project, method: :delete, data: { confirm: 'Are you sure?' }, class:"glyphicon glyphicon-trash" %></span>
        </div>
      </div>
    </div>
      <div class="row add-task-bar">
        <div class="input-bar col-xs-12 ">
          <%= link_to project do %>
            <span class="glyphicon glyphicon-plus col-xs-1 left_plus" >  </span>
          <% end %>
        <div class="col-xs-10" >

        </div>
      </div>
    </div>
    <% project.tasks.each do |task| %>
        <div  class="row task">
          <div class="col-xs-12">
            <div class="col-xs-1 checkbox">
              <input type="checkbox" name="task" id="task" value="1" data-url="/tasks/#{task.id}" data-remote="true" data-method="post" class="task-check">
            </div>
            <div>
            <% if task.is_active %>
              <div class="col-xs-8 taskbody">
                <%= task.body %>
                <%= task.deadline %>
              </div>
            <% elsif !task.is_active %>
              <div class="col-xs-8 taskbody-done">
                <%= task.body %>
                <%= task.deadline %>
            <% end %>
            </div>
            <div class="mini-glyph">
              <div class="col-xs-1">
                <span class="glyphicon glyphicon-arrow-up"></span>
                <span class="glyphicon glyphicon-arrow-down"></span>
              </div>
              <div class="col-xs-1">
                <%= link_to edit_project_task_path(project,task) do %>
                    <span class="glyphicon glyphicon-pencil"></span>
                <% end %>
              </div>
              <div class="col-xs-1">
                <span><%= link_to " ", project_task_path(project,task), method: :delete, data: { confirm: 'Are you sure?' }, class:"glyphicon glyphicon-trash" %></span>
              </div>
            </div>
          </div>
        </div>
    <% end %>

  </div>
    <% end %>
</div>
  <div class="row text-center">
    <div class="col-xs-4"></div>
      <div class="todo-btn col-xs-4">
        <a href="projects/new" class="btn">
            <span class="glyphicon glyphicon-plus"></span>
            Add TODO list
      </a>
    </div>
</div>

Aucun commentaire:

Enregistrer un commentaire