Purpose of remote: true in rails

Question

I followed a rails tutorial where we submitted a form with ajax. We used remote: true in form_for:

<%= form_for @task, remote: true do |f|   %>

Everything works fine. But I'm confused about remote: true. What is the purpose of remote: true?

Answer 1

JS

remote: true is a part of the Rails UJS (unobtrusive Javascript) driver. It just adds the data-remote: true attribute to any object you add it to, allowing Rails's UJS script to bind it to some ajax functionality...

Some definition from Rails:

Note the data-remote="true". Now, the form will be submitted by Ajax rather than by the browser's normal submit mechanism.

You probably don't want to just sit there with a filled out , though. You probably want to do something upon a successful submission. To do that, bind to the ajax:success event. On failure, use ajax:error. Check it out:

It's pretty simple really....

It basically assigns a Javascript .on bind to any elements on your page which have data-remote: true. This is what sends the Ajax request for you.

---

Hooks

The important thing to note is that this method creates several "hooks" which you can use with your other javascript:

This allows you to use the remote: true functionality, and customise what happens by using the hooks above...

#app/views/messages/new.html.erb
<%= form_for @messages, remote: true do |f| %>
   <%= f.submit %>
<% end %>

#app/assets/javascripts/application.js
$(document).on("ajax:success", "#messages", function(event, data, status, xhr) {
    alert("Form submitted, thank you!");
});

Answer 2

remote: true generates data-remote="true" as html

It submits form by ajax rather than browser's normal submit mechanism

Reference