Skip to content

Unobtrusive scripting support for jQuery (list of data attributes)

Jump to bottom
Sean Collins edited this page Feb 6, 2020 · 5 revisions

data-* Attributes

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

The default confirmation uses a javascript confirm dialog, but you can customize it by listening to the confirm event, that is fired just before the confirmation window appears to the user. To cancel this default confirmation, make the confirm handler to return false.

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

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

This attribute indicates that a submit button, 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.

This also works for links with data-method attribute.

"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-url" (with "data-remote"): Send AJAX request to the given url after change event on element

<input type="checkbox" name="task" id="task" value="1" data-url="/tasks/1" data-remote="true" data-method="post">

Changing the value of the checkbox (by clicking on it) will create new AJAX POST request to the URL defined in data-url with parameters obtained from jQuery serialize() method run on the checkbox.

This can be applied also to any other input, select or textarea elements.

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

"data-params": Add additional parameters to the request

<a data-remote="true" data-method="post" data-params="param1=Hello+server" href="/test">AJAX action with POST request</a>

Activating the link will send AJAX POST request with additional parameter param1 with value Hello server.

You can also use escaped JSON in data-params. It is useful when you create links with Rails's link_to helper and specifying parameters in a Hash.

<a data-remote="true" data-method="post" data-params="{&quot;param1&quot;:&quot;Hello server&quot;}" href="/test">AJAX action with POST request</a>
Clone this wiki locally