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
-
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.
-
Thing Jbuilder, like the render action above except the JSON object will be created via Jbuilder view.
-
Thing Collection, like the Jbuilder action above except a collection of JSON objects will be sent from the server to the client.
-
Interval, starts a timer than creates a client-side object and then adds adds it to the page every 1.5 seconds.
-
Reset, clears all the Json Thing objects added to the page as well as disabling the interval timer.
-