How to toggle an item's status with JavaScript in Ruby on Rails in index view

Question

I have a model in Ruby on Rails (Rails 3) that has a "status" value. The status can either be on or off. In my index view for this model, I show the status for each item (just basic text showing either "on" or "off"). I want users to be able to click on this status field for each item and then it must toggle, without having to re-render the page. So it basically acts like a type of on/off switch.

When I toggle the on/off switch for the specific object, I need to call a controller action to perform some actions. Then I also need to update the view to change "on" to "off" or "off" to "on".

JavaScript would be the way to go, I suppose. I'm not sure if I'll need ajax as well. I have been looking for tutorials with a very basic step-by-step explanation of how to add JavaScript to my Ruby on Rails application. I am a complete newbie to JavaScript in RoR. Most of the tutorials I found assumes a basic background knowledge of JQuery/Protocol/Ajax/Javascript or it goes off on tangents.

Can someone perhaps recommend a good, basic and uncluttered tutorial for getting started with JavaScript in Ruby on Rails and/or give a basic outline as to how the mentioned functionality can be implemented?

Answer 1

Two ways to go.

The Rails way: the view helper form_for has an option :remote => true that will perform an ajax request. Let say your model is called Car , and @car an instance of an existing object, you could do:

= form_for @car, :remote => true do |f|
  = f.hidden_field :status, true
  = f.submit_tag "On"

= form_for @car, :remote => true do |f|
  = f.hidden_field :status, false
  = f.submit_tag "Off"

Everything here is convention, so it would go to your cars#update action, where you would return Javascript to show / hide your forms. In that way you could toggle the On / Off forms with a jQuery show() and hide() methods. http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for

The plain jQuery way: use the same form but without the :remote => true option. The controller is the same as well, you will just return JSON instead (with a value saying if the update has been successful or not). Add your own javascript ($.ajax) on the client to update the object and toggle the html forms.

I tend to use the second option because I hate to return Javascript from the controller. I like to have all my Javascript related to one event in the same place.

Answer 2

First step. In your controller action, have that action be able to respond to ajax like

class DocumentsController < ApplicationController
    respond_to :html, :js, :json
    def edit
        @document = current_user.documents.find(params[:id])
        respond_with @document, location: root_path
    end

Then you will create a *.js.erb file in your appropiate views controller, in this case in my app/views/documents and i'd call it edit.js.erb Now in your js.erb file you will have some query that will manipulate that dom eleemnt you want. Like when I call the edit action in my views, whether through a link or button or whatever, it will trigger the js.erb file.

This is one way. Another way to do it (the rails way) is to add some jQuery action observers in your app/assets/javascript folder. These are static and are named *.js.coffee These jQuery actions are probably the way you want to use it if the user is manipulating. Just add the jQuery for that dom element and it will be compiled and loaded into assets pipeline. And there are many tutorials to learn how to do this, I recommend looking for up to date things as the ways to do all this changes in rails every 6 months.