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

As per my comment, strikes me as a caching issue.

First thing to do is for the Ajax methods, set the cache to false. Then, to see if it works, log something in the success handlers. This will both show you that the Ajax has indeed fired, but will also report back what the results were:

// nested in your code as per your sample; just extracted out here

$.ajax({
     cache: false,
     url: "/habits/" + habit + "/levels/" + level + "/days_missed",
     method: "POST",
     success: function(data){
       console.log("result of Post is: ", data);
     }
   });

// ...

$.ajax({
     cache: false,
     url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
     method: "DELETE",
     success: function(data){
       console.log("result of Delete is: ", data);
     }
   });

The supplemental thing to do is open up your web development tools in your browser and inspect network activity. When the Ajax call is made, it should report back how long it took as well as what the source was. If it comes from the cache, it will say "cache" somewhere in there.