How to fix AJAX to always fire when checking box?

Question

Sometimes this AJAX fires & sometimes it doesn\'t, let me explain.

habit.js

$(document).ready(function()
{
  $(\".habit-check\")         


        

Answer 1

Not so much of an answer yet, but too big for a comment. Let's find out if the ajax is actually being called. I put some alert boxes in as well as an ajax error catcher. Run it and see what behavior you get, please. It should help all of us understand what is really going on.

$(document).ready(function()
{
  $(document).on("click", ".habit-check", function()
  {
    alert(".habit-check change called");
    habit = $(this).parent().siblings(".habit-id").first().attr("id");
    level = $(this).siblings(".level-id").first().attr("id");
    if($(this).is(":checked"))
    {
       alert("calling POST " + "/habits/" + habit + "/levels/" + level + "/days_missed");
       $.ajax(
       {
         url: "/habits/" + habit + "/levels/" + level + "/days_missed",
         method: "POST"
       });
    }
    else
    {
       alert("calling DELETE " + "/habits/" + habit + "/levels/" + level + "/days_missed/1");
       $.ajax(
       {
         url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
         method: "DELETE"
       });
    }
  });
  $( document ).ajaxError(function( event, request, settings )
  {
    alert("ajax error received");
  });
});