消失的检查标记之谜

如果用户单击一个复选框，则会触发下面的代码，但勾选标记有时会消失，因此在应该选中该复选框时将取消选中该框。

$(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); } }); }); 

show页面调用AJAX

 
  
 <label id="" class="habit-id">Strikes:  
 <label id="" class="habit-id-two">Strikes:   = (index + 1) %> 
  <label id="" class="level-id">Level :  <label id="" class="level-id-two">Level :   0, {class: "habit-check"} %>  1, {class: "habit-check"} %>  2, {class: "habit-check"} %> 
   
  

这就是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 

这是它的要点 。 请不要犹豫，要求提供进一步的代码或澄清：]

当我删除了可能是问题的turbolinks时，我也遇到了这个问题，但事实并非如此。

Answer 1

好的，跟踪这个令人讨厌的一个！

问题在于生成的HTML。 事实certificate，有问题的人最终会执行AJAX调用……无效的URL（导致404的）！

在您的节目视图中 ，您有以下代码：

 <% if @habit.current_level_strike %> 
 Strikes: <% else %> 
 Strikes: <% end %>  <% if @habit.current_level_strike %> Level <%= index + 1 %>: <% else %> Level <%= index + 1 %>: <% end %> 

为什么会有问题？ 好吧，在你的JavaScript中，你依赖于.habit-id和.level-id确切类：

 habit = $(this).parent().siblings(".habit-id").first().attr("id"); level = $(this).siblings(".level-id").first().attr("id"); 

虽然根据show视图中的 HTML，有时会生成适当的类，有时会有附带*-two （ habit-id-two和level-id-two ）。

如果您尝试修复类名，那么所有类都与JavaScript所期望的forms相同（ .siblings(".habit-id")和.siblings(".level-id") ），问题就会消失。

更好的解决方案 （是的，可以稍微简化一下;））

如果我们预生成url并将其设置为HTML，如下所示：

 
  <% @habit.levels.each_with_index do |level, index| %> <% if @habit.current_level >= (index + 1) %> 
  
 <% end %> <% end %> 
  

然后，您的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％确定这是你想要的吗？

希望有所帮助！ 如果您有任何疑问 – 我非常乐意帮助/解释！

祝好运！