Simple Rails Javascript Example

A simple Rails example with some Javascript action:

• The Count Up and Count Down buttons on the Thing show page are defined as remote:true and when clicked will request a JS response from the Things controller. The countup.js.erb and countdown.js.erb views will be returned and evaled on the client-side.

• The JS response for the Count Up and Count Down buttons will modify the count span denoted by a data-behavior attribute. When targetting an element with Javascript it is best not to use classes or IDs since those should be used exclusively for styling.

• Any ajax:error event will be logged to the console in the application.js file. This will help debug JavaScript errors in the JS view files.

• Setup body tag with controller and action name.

• The New Thing button on the Things index page, when clicked, will load up the Thing form and hide the New Thing button both via a Javascript response triggered by the remote: true attribute attached to the New Thing link.

• A cancel button will remove the Thing form and redisplay the New Thing button.

• The Submit button to create a new Thing will trigger a JS response that: removes the form, shows the New Thing button and appends the newly created Thing to the Things table via a partial.

• The Edit action upon submission does a Javascript redirection by invoking the _replace action on the window.location property.

• The Thing model has server side validation for name presence and name length greater than four characters. That same validation also occurs client-side via the JavaScript. Those validations are contained in the things.coffee file in the assets/javascripts directory. The actual validation occurs via the on blur and on focus events for the name input field.

• The style checkbox will toggle the background and text style of the Thing name in the table contained on the index page. This is done client side only via JavaScript.

• The Ajax Json Things section has the following actions

  1. Thing Render, issues an AJAX call from things.coffee to the json things_controller.rb controller which returns a rendered JSON thing object which is then inserted onto the page.

  2. Thing Jbuilder, like the render action above except the JSON object will be created via Jbuilder view.

  3. Thing Collection, like the Jbuilder action above except a collection of JSON objects will be sent from the server to the client.

  4. Interval, starts a timer than creates a client-side object and then adds adds it to the page every 1.5 seconds.

  5. Reset, clears all the Json Thing objects added to the page as well as disabling the interval timer.