Question

I’ve just got a jquery function working with my rails3 application. When a user clicks a checkbox on the page, it toggles the status and fades out:

 $('#complete_task_1').click(function() {
  $.ajax({
    url: $(this).attr('href'),
    type: 'get',
    dataType: 'html',
    success: function(data, textStatus, jqXHR) {
        $('#complete_task_1').closest('tr').fadeOut();
    },
    error: function(data, status, error){
        alert('Oooops!');
      }
  });
});

Initially I wanted to use $(this) instead of $(‘#complete_task_1’) but I couldn’t get that working. Right now, it’s all working fine.

My problem is that I need to reload the page manually after checking one box – otherwise, when I click another items checkbox, the js doesn’t seem to be called. It’s neither a success or error. There’s nothing in the dev log either.

Is there an easy way around this??

Answer 1

Initially I wanted to use $(this) instead of $(‘#complete_task_1’) but I couldn’t get that working.

That issue is easy, it’s because this is determined by how a function is called, not where it’s defined. Since jQuery is calling your success function, this is set by jQuery.

You can tell jQuery what this should be inside that callback via the context argument:

$('#complete_task_1').click(function() {
  $.ajax({
    url: $(this).attr('href'),
    type: 'get',
    dataType: 'html',
    context: this,
    success: function(data, textStatus, jqXHR) {
        $(this).closest('tr').fadeOut();
    },
    error: function(data, status, error){
        alert('Oooops!');
      }
  });
});

…or since you’re already calling $(this) once and I hate to see unnecessary duplication, you can use the scope you’re already closing over:

$('#complete_task_1').click(function() {
  var $this = $(this);
  $.ajax({
    url: $this.attr('href'),
    type: 'get',
    dataType: 'html',
    success: function(data, textStatus, jqXHR) {
        $this.closest('tr').fadeOut();
    },
    error: function(data, status, error){
        alert('Oooops!');
      }
  });
});

My problem is that I need to reload the page manually after checking one box – otherwise, when I click another items checkbox, the js doesn’t seem to be called. It’s neither a success or error. There’s nothing in the dev log either.

You’re using an ID in your code, so you’re only ever hooking up one checkbox (since IDs must be unique on the page). My guess is that having updated the status, when you refresh the page that one checkbox now represents a different item.

Instead of using an ID selector, use a class selector or a structural selector matching all of your relevant checkboxes. It looks like you’re using an href on the checkbox to differentiate them, so none of the code changes except the markup, and the initial selector.

So if you wanted to use a class on the checkboxes:

$('.someclass').click(function() { ...

Or if they’re all in a container, you could use a structural (in this case, descendant) selector:

$('#the_container input:checkbox').click(function() { ...

---

Update: Here’s a complete working example (live copy):

HTML:

<table id="container">
  <tbody>
    <tr>
      <td>
        <label>
          <input type="checkbox" data-href="http://jsbin.com/amiruf/1">
          One
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input type="checkbox" data-href="http://jsbin.com/amiruf/2">
          Two
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label>
          <input type="checkbox" data-href="http://jsbin.com/amiruf/3">
          Three
        </label>
      </td>
    </tr>
  </tbody>
</table>

Those URLs just reply with

Response 1

…or 2 or 3.

JavaScript:

jQuery(function($) {

  $("#container input:checkbox").click(function() {
    var $this = $(this);
    $.ajax({
      url: $this.attr("data-href"),
      dataType: "text",
      success: function(data) {
        $this.closest("tr").fadeOut();
        display(data);
      },
      error: function() {
        display("Error");
      }
    });
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

---

Off-topic: It looks like you’re using an href attribute on your checkboxes. That’s invalid HTML, href is not a valid attribute for input[type=checkbox]. You might consider changing that to data-href, which would make it valid as of HTML5.