Rails change boolean value with checkbox and jquery ajax

Question

I am new to rails and trying to change the value of a boolean via a checkbox and using jquery ajax:

<%- @tasks.each do |task| %>
  <div class="task-wrapper">
    <%= check_box_tag 'completed', task.id , task.completed, :class => "task-check" %>
    <%= content_tag :span, task.task %>
    <%= content_tag :span, task.deadline %>
  </div>
<% end %>

and the javascript:

$(".task-check").bind('change', function(){
  if (this.checked){
    var bool = this.checked ? 1 : 0;
    $.ajax({
      url: '/todos/toggle',
      type: 'POST',
      data: '{"task_id":"'+ this.value +'", "bool":"'+ bool +'"}'
    });
  }
  else {
    alert("no");
  }
});

then the controller:

def toggle(task_id, bool)
  @task = Todo.find_by_id(task_id)

  if @task != nil?
    @task.update_attributes(:completed => bool)
  else
    set_flash "Error, please try again"
  end
end

finally the routes:

resources :todos do
  member do
    post 'toggle'
  end
end

also tried collection but gives the same error.

when ever i try it i get a 404 error on the action.

what is the problem?

thanks

Why don't you put it inside a form? It'd be much simpler. Then instead of check_box_tag you can use f.check_box. — Catfish
– Catfish, Commented Mar 22, 2013 at 14:34
@Catfish - But how would i change the bool without a postback? — Wahtever
– Wahtever, Commented Mar 22, 2013 at 14:49

Jim Meyer · Accepted Answer · 2016-01-07 00:44:10Z

45

As of Rails 4, there's a way to do this without needing any additional JS or CSS:

<%= check_box_tag 'completed', task.id, task.completed,
      data: {
        remote: true,
        url: url_for(action: :toggle, id: task.id),
        method: "POST"
      } %>

It turns out that adding remote: true to an input causes jquery-ujs to make it ajax-y in all the nice ways. Thoughtbot's "A Tour of Rails jQuery UJS" briefly touches this (and many other good things available); the "Unobtrusive scripting support for jQuery" page in the jQuery UJS wiki does a thorough job on this as well.

answered Jan 7, 2016 at 0:44

Jim Meyer

1,3961 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dft Over a year ago

Also available for earlier versions of rails, not exactly sure which ones, but last version of 3 works.

Lucas Andrade Over a year ago

Still working for rails 5.1.6 and 5.2. This is the best awnser here.

ramblex · Accepted Answer · 2013-03-22 15:10:26Z

16

Try the following (leaving everything else as is):

the javascript:

$(".task-check").bind('change', function(){
  if (this.checked){
    $.ajax({
      url: '/todos/'+this.value+'/toggle',
      type: 'POST',
      data: {"completed": this.checked}
    });
  }
  else {
     alert("no");
  }
});

the controller:

def toggle
  @task = Todo.find(params[:id])

  if @task.update_attributes(:completed => params[:completed])
    # ... update successful
  else
    # ... update failed
  end
end

Take a look at bundle exec rake routes to show you the paths that rails generates. In the case of your post 'toggle' which is a member you get a path like /todos/:id/toggle, hence the updated url in the ajax.

In the controller the :id from the path ends up in params[:id]. The data from the ajax request also ends up in the params hash, hence params[:completed].

edited Mar 22, 2013 at 15:10

answered Mar 22, 2013 at 14:50

ramblex

3,05723 silver badges20 bronze badges

2 Comments

Wahtever Over a year ago

This works great, could you please explain why it does? Thanks

Jim Meyer Over a year ago

Note that Rails 4 adds a simpler way, as noted below

Collectives™ on Stack Overflow

Rails change boolean value with checkbox and jquery ajax

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related