Question

I am working on a jQuery-based todo list interface, and have hit a bit of a wall. The jQuery I am working with is a bit hacked together from various tutorials I have read, as I’m a bit of a beginner.

$('#todo input:checkbox').click(function(){
  var id = this.attr("value");
  if(!$(this).is(":checked")) {
    alert("Starting.");
    $.ajax({
      type: "GET",
      url: "/todos/check/"+id,
      success: function(){
        alert("It worked.")
      }
    });
  }
})

This is the HTML I am using,

<div id="todo"> 
  <input type="checkbox" checked="yes" value="1"> Hello, world. <br />
</div>

Any help on this would be greatly appreciated. For reference, thereason I have alerts in the jQuery is for debugging. The reason I can tell the code isn’t working is because I am not getting these alerts. Thanks.

Answer 1

Just a quick glance and I think the if(!$(this).is(":checked")) portion may be the issue. Try something more like if( !$(this).attr('checked') )

Also: the url in your ajax statement doesn’t look right. It appears to be an absolute path instead of a relative one to me.

One more thing: Shouldn’t var id = this.attr("value"); be var id = $(this).attr("value"); ?

Let me know if these tips help. Otherwise a general tip:

In your code you appear to be testing three things simultaneously. First it has to attach the event to the correct checkbox. Then it has to pass a condition, and then it has to make a successful ajax call. We only get feedback if all three things worked, otherwise if one is out of place, then we have no way of knowing where the failure was. Test each piece to make sure it works, and then you’ll know where to focus your efforts. 🙂