如何使用 AJAX 和复选框来创建和销毁？

Question

我在想，当用户选中一个复选框时，页面会自动触发一个 AJAX 调用并更新关卡模型（调用创建或销毁操作）。用户不必手动提交表单。

class Level < ActiveRecord::Base
  belongs_to :habit
end

关键是，如果用户错过了养成好习惯的一天，他们应该勾选错过的方框。对于他们错过的每一天，他们必须在进入积极习惯养成过程的下一个阶段之前弥补它。

class Habit < ActiveRecord::Base
    belongs_to :user
    has_many :comments, as: :commentable
    has_many :levels
    serialize :committed, Array
    validates :date_started, presence: true
    before_save :current_level
    acts_as_taggable
    scope :private_submit, -> { where(private_submit: true) }
    scope :public_submit, -> { where(private_submit: false) }

    attr_accessor :missed_one, :missed_two, :missed_three

    def save_with_current_level
        self.levels.build
        self.levels.build
        self.levels.build
        self.levels.build
        self.levels.build
        self.save
    end

    def self.committed_for_today
    today_name = Date::DAYNAMES[Date.today.wday].downcase
    ids = all.select { |h| h.committed.include? today_name }.map(&:id)
    where(id: ids)
  end 

    def current_level
            return 0 unless date_started
            committed_wdays = committed.map { |day| Date::DAYNAMES.index(day.titleize) }
            n_days = ((date_started.to_date)..Date.today).count { |date| committed_wdays.include? date.wday }
            actual_days = n_days - self.missed_days

      case n_days     
          when 0..9
            1
          when 10..24
            2
          when 25..44
            3
          when 45..69
            4
          when 70..99
            5
          else
            "Mastery"
        end
    end
end

您可以在此处看到错过一天的 +1 增量。我们如何通过 AJAX 保存它？

class DaysMissedController < ApplicationController
before_action :logged_in_user, only: [:create, :destroy]

def create
  level = Habit.find(params[:habit_id]).levels.find(params[:level_id])
  level.missed_days = level.missed_days + 1
  level.save
  head :ok # this returns an empty response with a 200 success status code
end

def destroy
  level = Habit.find(params[:habit_id]).levels.find(params[:level_id])
  level.missed_days = level.missed_days - 1
  level.save
  head :ok # this returns an empty response with a 200 success status code
end
end

配置文件

resources :habits do
  resources :comments
  resources :levels do
    # we'll use this route to increment and decrement the missed days
    resources :days_missed, only: [:create, :destroy]
  end
end

这是来自 习惯 _form 的视觉效果：

习惯_形式

  <label> Missed: </label>
  <% @habit.levels.each_with_index do |level, index| %>
    <p>
      <label> Level <%= index + 1 %>: </label>
      <%= f.check_box :missed_one, checked: (level.missed_days > 0) %>
      <%= f.check_box :missed_two, checked: (level.missed_days > 1) %>
      <%= f.check_box :missed_three, checked: (level.missed_days > 2) %>
    </p>
  <% end %>

感谢您的专业知识！

Answer 1

不太难。在你的习惯表格中：

<label id="<%= @habit.id %>" class="habit-id"> Missed: </label>
  <% @habit.levels.each_with_index do |level, index| %>
    <p>
      <label id="<%= level.id %>" class="level-id"> Level <%= index + 1 %>: </label>
      <%= check_box_tag nil, true, level.missed_days > 0, {class: "habit-check"} %>
      <%= check_box_tag nil, true, level.missed_days > 1, {class: "habit-check"} %>
      <%= check_box_tag nil, true, level.missed_days > 2, {class: "habit-check"} %>
    </p>
  <% end %>

在您的 javascript 文件中：

$(document).ready(function()
{
  $(".habit-check").change(function()
  {
    habit = $(this).parent().siblings(".habit-id").first().attr("id");
    level = $(this).siblings(".level-id").first().attr("id");
    if($(this).is(":checked"))
    {
       $.ajax(
       {
         url: "/habits/" + habit + "/levels/" + level + "/days_missed",
         method: "POST"
       });
    }
    else
    {
       $.ajax(
       {
         url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
         method: "DELETE"
       });
    }
  });
});

您的 destroy 方法似乎不需要 id，所以这就是我为它传递 1 的原因；只是给它一个 id.

如何使用 AJAX 和复选框来创建和销毁？

How to use AJAX with checkboxes to CREATE & DESTROY?

ruby

checkbox

jquery

ruby-on-rails

erb