消失的複選標記的奧祕

Question

如果用戶單擊複選框，則下面的代碼將會觸發，但複選標記有時會消失，因此應在選中該複選框時未勾選。

$(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認爲可能是問題，但事實並非如此。

Answer 1

好吧，跟蹤這個討厭的人！

問題出現在您生成的HTML中。事實證明，有問題的人最終會執行AJAX調用...無效的URL（導致404的）！

在你放映視圖，你有這樣的代碼：

<% 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"); 

儘管根據HTML從放映視圖，有時會產生適當的類，有時也有類以的附錄*-two（habit-id-two和level-id-two）。

如果您嘗試修復類名，那麼所有表單都與JavaScript（.siblings(".habit-id")和.siblings(".level-id")）預期的形式相同，則問題會消失。

更好的解決方案（是的，它可以簡化了一點;））

如果我們預生成的網址，使他們在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" 
     }); 
    } 
    }); 
}); 

請注意，當生成刪除-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％確定這是你想要的嗎？

希望有幫助！如果您有任何問題 - 我非常樂意幫助/解釋！

祝你好運！