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>

Attribute

Description

data-remote

Enables remote behavior on the element if set to anything.

data-method

Changes the method of the AJAX request. Defaults to "get". Maps to jQuery's type.

href

URL for AJAX request. Defaults to the current url. Maps to jQuery's url.

data-type

Specify the data type of the response. Can be "xml", "json", "script", or "html". Defaults to jQuery's "intelligent guess" from the response content type. Maps to jQuery's dataType.

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

<form>

Attribute

Description

data-remote

Enables remote behavior on the element if set to anything.

method

Changes the method of the AJAX request. Defaults to "get". Maps to jQuery's type.

action

URL for AJAX request. Defaults to the current url. Maps to jQuery's url.

data-type

Specify the data type of the response. Can be "xml", "json", "script", or "html". Defaults to jQuery's "intelligent guess" from the response content type. Maps to jQuery's dataType.

<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.)

Property

Value

Synchronicity

Sync

Bubbles

Yes

Cancelable

Yes

Default action

Sends request

Target

a or form element with [data-remote]

Extra arguments

jqXHR

XMLHttpRequest like object

settings

Object passed as $.ajax settings

ajaxSuccess

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

Property

Value

Synchronicity

Sync

Bubbles

Yes

Cancelable

No

Target

a or form element with [data-remote]

Extra arguments

jqXHR

XMLHttpRequest like object

settings

Object passed as $.ajax settings

data

The data returned from the server

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).

Property

Value

Synchronicity

Sync

Bubbles

Yes

Cancelable

No

Target

a or form element with [data-remote]

Extra arguments

jqXHR

XMLHttpRequest like object

textStatus

"timeout", "error", "abort", or "parsererror"

errorThrown

Exception object

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.

Property

Value

Synchronicity

Sync

Bubbles

Yes

Cancelable

No

Target

a or form element with [data-remote]

Extra arguments

jqXHR

XMLHttpRequest like object

textStatus

"timeout", "error", "abort", or "parsererror"

$(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>

Attribute

Description

data-method

Method for following href. Can be "post", "put", or "delete". "get" is ignored since its the default behavior for links.

<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>

Attribute

Description

data-confirm

Message to pass to confirm().

<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>

Attribute

Description

data-disable-with

Message to set <input> value or <button> innerHTML to.

<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">