The Mystery of the Disappearing Checkmarks

Question

If a user clicks a checkbox the below code will fire, but the checkmark will sometimes disappear, the box is therefore unchecked when it should be checked.

$(doc         


        

Answer 1

Ok, tracked this nasty one down!

The problem lays in your HTML generated. It turns out, that the problematic ones end up performing AJAX calls to... invalid URLs (causing 404's)!

In your show view, you have code like:

<% if @habit.current_level_strike %> 
  
 Strikes:
<% else %> 
  
 Strikes:
<% end %>



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

Why is it problematic? Well, in your JavaScript, you're relying on exact classes of .habit-id and .level-id:

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

While according to HTML from show view, sometimes the proper classes are generated, and sometimes there are classes with appendix of *-two (habit-id-two and level-id-two).

If you try fixing the class names, so all are of the same form expected by your JavaScript (.siblings(".habit-id") and .siblings(".level-id")), the problem disappears.

Better solution (yes, it is possible to simplify it a bit ;))

What if we pregenerate urls, and set them in HTML like so:

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

          
        
      <% end %>
    <% end %>