CODEWITHSUNDEEP
ruby-on-rails
Alexandr Dmitrenko
Alexandr Dmitrenko

Reputation: 153

Rails how to update the page with the help of Ajax

The object Task contains a boolean field done. How to Ajax refresh the page after the change of status? And instead true - false display value complete - incomplete?

routes.rb:

resources :tasks do
    member do
      post 'done'
    end
  end

Controller:

def done
    @task = Task.find(params[:id])
    @task.update_attributes(:done => params[:done])

    respond_to do |format|
      format.js {}
    end

  end

View: 

....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check", remote: true %></td>
....

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    });
  });

</script>

Update

edited script

<script>
  $(".task-check").bind('change', function(){
    $.ajax({
      url: '/tasks/'+this.value+'/done',
      type: 'POST',
      data: {"done": this.checked},
    }).done(function(ajax_response){
     location.reload();
    });
  });

</script>

and controller

def done
    @task = Task.find(params[:id]) # make sure you have this
    @task.update_attributes(:done => params["done"])

    render :json => { data: "Success", is_done: params[:done] }
  end

How to update page content without having to reboot ?

Upvotes: 0

Views: 507

Answers (1)

toddmetheny
toddmetheny

Reputation: 4443

Controller:

def done
  @task = Task.find(params[:id]) # make sure you have this 
  @task.update_attributes(:done => params["done"])

  render :json => { data: "Success", is_done: params[:done] }
end

View:

 ....
 <td><%= task.done %></td>
 <td><%= check_box_tag 'done', task.id , task.done, :class => "task-check" %></td>
 ....

 <script>
  $(".task-check").on('change', function(e){
    // removed remote-true. you can preventDefault if you need to but doubt page tries to refresh from a checkbox getting checked. e.preventDefault() if you need it
    $.ajax({
      type: "POST",
      url: '/tasks/done',
      type: 'POST',
      data: {done: $('.task-check').val()},
    }).done(function(ajax_response){
      // update whatever you want after it completes 
    });
   });

 </script>

Didn't test this but I write these all the time. Let me know if it doesn't work post the payload and I'll figure out what's missing.

If you just want to update the value from 'incomplete' to 'complete', you can simply target the element that's called incomplete. if it has a class of, say, 'task-status' you can target that element and update in the .done part of the function. For instance:

$('.task-status').text('Complete')

should replace what previously said incomplete. If it's a text input you might use .val() instead. If it's just text on the page .text() should work.

Upvotes: 1

Related Questions