17. jQuery UJS and AJAX

Download

February 27, 2015

Gravatar Gravatar Gravatar Gravatar Gravatar Gravatar Gravatar Gravatar Gravatar 9

A quick introduction to jQuery UJS and how we can use it to make an AJAX request to render a javascript template from the Rails server


Notes

These examples all show the raw HTML that is needed. You can generate these data attributes using Rails form, form_tag and link_to helpers by adding the data: {} option.


"data-confirm": Confirmation dialogs for links and forms
This displays a confirmation dialog from the browser asking the user to confirm they want to execute an action.

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

"data-disable-with": Automatic disabling of links and submit buttons in forms
This option disables and changes the value of the button or link it's added to when submitting the form or clicking on the link. You can learn more about this option in Button Loading Animations with jQuery UJS

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

"data-method": Links that result in POST, PUT, PATCH or DELETE requests
This option allows you to change the request type from the default. With links, you can change them to submit other requests than the default GET.

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

"data-remote": Make links and forms submit asynchronously with Ajax
This option submits the form or link asynchronously and, by default, expects the server to render a Javascript response which then gets executed in the browser.

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

"data-type": Set Ajax request type for "data-remote" requests
This option allows you to set the remote dataType option when using remote: true

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

Resources

jQuery UJS on Github
List of supported options


Discussion