如果用户单击一个复选框,下面的代码将被触发,但复选标记有时会消失,因此该复选框在应该被选中时未被选中。
$(document).on("page:change", 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"
});
}
});
});
# I ALSO TRIED USING LOCAL STORAGE, BUT IT HAD THE SAME PROBLEM.
# VERSION 2
$(document).on("page:change", 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"
});
localStorage.setItem("habit_"+habit+"_"+level, true);
} else {
$.ajax({
url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
method: "DELETE"
});
localStorage.setItem("habit_"+habit+"_"+level, false);
}
});
});
显示页面调用AJAX
<div class="strikes">
<% if @habit.current_level_strike %>
<div class="btn" id="red"> <label id="<%= @habit.id %>" class="habit-id">Strikes:</label>
<% else %>
<div class="btn" id="gold"> <label id="<%= @habit.id %>" class="habit-id-two">Strikes:</label>
<% end %>
<% @habit.levels.each_with_index do |level, index| %>
<% if @habit.current_level >= (index + 1) %>
<p>
<% if @habit.current_level_strike %>
<label id="<%= level.id %>" class="level-id">Level <%= index + 1 %>:</label>
<% else %>
<label id="<%= level.id %>" class="level-id-two">Level <%= index + 1 %>:</label>
<% end %>
<%= 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 %>
<% end %>
</div>
</div>
这是 AJAX 触发的目标,days_missed_controller.rb。
class DaysMissedController < ApplicationController
before_action :logged_in_user, only: [:create, :destroy]
def create
habit = Habit.find(params[:habit_id])
habit.missed_days = habit.missed_days + 1
@habit.save!
level = habit.levels.find(params[:level_id])
level.missed_days = level.missed_days + 1
if level.missed_days == 3
level.missed_days = 0
level.days_lost += habit.calculate_days_lost + 1
end
level.save!
head :ok # this returns an empty response with a 200 success status code
end
def destroy
habit = Habit.find(params[:habit_id])
habit.missed_days = habit.missed_days - 1
habit.save!
level = habit.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
这是 gist它的。请不要犹豫,要求进一步的代码或说明:]
当我删除 turbolinks 时我也遇到了这个问题,认为这可能是问题所在,但事实并非如此。
最佳答案
好的,追踪到这个讨厌的人!
问题出在您生成的 HTML 中。事实证明,有问题的那些最终会执行 AJAX 调用...无效的 URL(导致 404
)!
在您的显示 View 中,您有如下代码:
<% if @habit.current_level_strike %>
<div class="btn" id="red"> <label id="<%= @habit.id %>" class="habit-id">Strikes:</label>
<% else %>
<div class="btn" id="gold"> <label id="<%= @habit.id %>" class="habit-id-two">Strikes:</label>
<% end %>
<!-- [...] -->
<% if @habit.current_level_strike %>
<label id="<%= level.id %>" class="level-id">Level <%= index + 1 %>:</label>
<% else %>
<label id="<%= level.id %>" class="level-id-two">Level <%= index + 1 %>:</label>
<% end %>
为什么会有问题?那么,在您的 JavaScript 中,您依赖于 .habit-id
和 .level-id
的确切类:
habit = $(this).parent().siblings(".habit-id").first().attr("id");
level = $(this).siblings(".level-id").first().attr("id");
虽然根据 show view 的 HTML,有时会生成正确的类,有时会出现带有 *-two
的类 (habit-id -two
和 level-id-two
)。
如果您尝试修复类名,那么它们都具有您的 JavaScript 所期望的相同形式(.siblings(".habit-id")
和 .siblings(".level -id")
),问题消失。
更好的解决方案(是的,可以稍微简化一下;))
如果我们预生成 url,并像这样在 HTML 中设置它们会怎么样:
<div class="strikes">
<!-- [...] -->
<% @habit.levels.each_with_index do |level, index| %>
<% if @habit.current_level >= (index + 1) %>
<p data-submit-url="<%= habit_level_days_missed_index_path({ habit_id: @habit.id, level_id: level.id }) %>"
data-delete-url="<%= habit_level_days_missed_path({ habit_id: @habit.id, level_id: level.id, id: 1 }) %>">
<!-- [...] -->
</p>
<% end %>
<% end %>
</div>
</div>
然后,您的 JavaScript 可以简化为:
$(document).on("page:change", function() {
$(".habit-check").change(function()
{
var submitUrl = $(this).parents("p").data("submit-url");
var deleteUrl = $(this).parents("p").data("delete-url");
if($(this).is(":checked"))
{
$.ajax(
{
url: submitUrl,
method: "POST"
});
}
else
{
$.ajax(
{
url: deleteUrl,
method: "DELETE"
});
}
});
});
请注意,在生成 delete-url 时,我使用了 id
的硬编码值,即 1
(尝试重现你原来的行为),在:
data-delete-url="<%= habit_level_days_missed_path({ habit_id: @habit.id, level_id: level.id, id: 1 }) %>"
对应于:
url: "/habits/" + habit + "/levels/" + level + "/days_missed/1"
在您的代码中。您100%确定这就是您想要的吗?
希望对您有所帮助!如果您有任何问题 - 我非常乐意提供帮助/解释!
祝你好运!
关于javascript - 消失的复选标记之谜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31064486/