Home

Unobtrusive scripting support for jQuery

Documentation

"data-confirm": Confirmation dialogs for links and forms

<form data-confirm="Are you sure you want to submit?">...</form>

The presence of this attribute indicates that activating a link or submitting a form should be intercepted so the user can be presented a JavaScript confirm() dialog containing the text that is the value of the attribute. If the user chooses to cancel, the action doesn't take place.

The attribute is also allowed on form submit buttons. This allows you to customize the warning message depending on the button which was activated. In this case, you should not also have "data-confirm" on the form itself.

"data-disable-with": Automatic disabling of submit buttons in forms

<input type="submit" value="Save" data-disable-with="Saving...">

This attribute indicates that a submit button or an input field should get disabled while the form is submitting. This is to prevent accidental double-clicks from the user, which could result in duplicate HTTP requests that the backend may not detect as such. The value of the attribute is text that will become the new value of the button in its disabled state.

"data-method": Links that result in POST, PUT, or DELETE requests

<a href="..." data-method="delete" rel="nofollow">Delete this entry</a>

Activating hyperlinks (usually by clicking or tapping on them) always results in an HTTP GET request. However, if your application is RESTful, some links are in fact actions that change data on the server and must be performed with non-GET requests. This attribute allows marking up such links with an explicit method such as "post", "put" or "delete".

The way it works is that, when the link is activated, it constructs a hidden form in the document with the "action" attribute corresponding to "href" value of the link and the method corresponding to "data-method" value, and submits that form.

Note for non-Rails backends: because submitting forms with HTTP methods other than GET and POST isn't widely supported across browsers, all other HTTP methods are actually sent over POST with the intended method indicated in the "_method" parameter. Rails framework automatically detects and compensates for this.

"data-remote": Make links and forms submit asynchronously with Ajax

<form data-remote="true" action="...">
  ...
</form>

This attribute indicates that the link or form is to be submitted asynchronously; that is, without the page refreshing.

If the backend is configured to return snippets of JavaScript for these requests, those snippets will get executed on the page once requests are completed. Alternatively, you can handle the published custom events to hook into the lifecycle of the Ajax request.

"data-type": Set Ajax request type for "data-remote" requests

<form data-remote="true" data-type="json">...</form>

This optional attribute defines the Ajax dataType explicitly when performing requests for "data-remote" elements.