Rails Behaviors

Rails Behaviors implements the data-* behaviors generated by Rails 3.x.

See more about setup and installation steps at https://github.com/josh/rails-behaviors.

Remote

#= require rails/remote

Implements data-remote for forms and links.

Markup

<a>

<a href="/toggle" data-method="post" data-remote>Toggle</a>

<form>

<form action="/comment" method="post" data-remote></form>

Events

Use delegated jQuery's global AJAX events to handle successful and error states. See jQuery's AJAX event documentation for a complete reference.

ajaxBeforeSend

This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

ajaxSuccess

This event is only called if the request was successful (no errors from the server, no errors with the data).

ajaxError

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

ajaxComplete

This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.

$(document).on 'ajaxBeforeSend', '.new-comment', ->
   $(this).addClass 'loading'

$(document).on 'ajaxComplete', '.new-comment', ->
   $(this).removeClass 'loading'

$(document).on 'ajaxSuccess', '.new-comment', (event, xhr, settings, data) ->
  $('.comments').append data.commentHTML

$(document).on 'ajaxError', '.new-comment', ->
  alert "Something went wrong!"

Method

#= require rails/method

Allow links to be followed with an alternate method using data-method.

To fake this, a hidden form element is created on the fly and is submitted.

Markup

<a>

<a href="/posts/1" data-method="delete">Delete</a>

Confirm

#= require rails/confirm

Prompts native confirm dialog before activating link or button.

Markup

<a>, <input type=submit> or <button>

<a href="/" data-confirm="Are you sure?">Delete</a>

Disable

#= require rails/disable

Disables clicked buttons with text in data-disable-with.

Markup

<input type=submit> or <button type=submit>

<input type="submit" data-disable-with="Submitting...">

Accept

#= require rails/accept

Make default Accept header prefer JS.

jQuery's default Accept header is just "*/*", which means accept anything back. To make AJAX requests work nicer with Rails' respond_to block, this prioritizes JS responds over others.

For an example:

respond_to do |format|
  format.html
  format.js
end

Would return html for "*/*" just because its first in the list. Adjusting the Accept header makes it work as expected.

Otherwise, if there is no format.js, the first responder will be used.

The new Accept value is:

"*/*;q=0.5, text/javascript, application/javascript,
 application/ecmascript, application/x-ecmascript"

CSRF

#= require rails/csrf

Adds CSRF tokens to AJAX requests and forms missing them.

CSRF tokens must be set in the document head as meta tags.

<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="5b404f7b7f90dc67708635fc8dd3">