Hi,
In this article, you'll learn what is Ajax and remote form submission in rails.
What is Ajax?
First of all, you need to know what actually Ajax is and for what purpose it is used. Let's understand this in simple words:
What happens when we visit a website?
When we visit a website a webpage is loaded from the server and if we want to see the new or updated information then we have to reload the webpage. So, this is a synchronous flow. The new data will be presented only when the webpage is requested from the server.
What if we don't want to reload the page or what if we only want to update some section of our current page without reloading the page?
So, this is where AJAX(Asynchronous Javascript and XML) comes in. Ajax is a mixture of several technologies and allows the client-side changes without reloading the page.
Remote form submission in Rails
Now let's dive deeply into Ajax by submitting a remote form using AJAX in Rails because adding Ajax to web forms is a common practice and Rails makes Ajax easy to implement.
In the example below, we will first create a simple form to get the user data and when the form is submitted we will save the user data and in response render a partial displaying the user information without reloading the page.
*Submitting a form using AJAX *
Controller name: Dashboard
Action which displays the form: new_user
Action which responds to Ajax request: save_new_user
Creating the form with remote true
When you're creating the form you just need to add
remote: true
in the form tag and rails automagically uses Ajax.
new_user.html.erb
<%= form_for @user, url: save_new_user_dashboard_index_path, html: { method: :post }, remote: true do |f| %>
.
.
.
<% end %>
The actual HTML generated by the ERb is:
`
.
.
.
`
As you can see it sets the variable data-remote="true" inside the form tag, which tells Rails to allow the form to be
handled by JavaScript.
Making the controller respond to Ajax requests
As our form is ready, now we need to make our controller respond to Ajax requests and this can be done by using the respond_to method.
dashboard_controller.rb
def save_new_user
@user = User.create(new_user_params)
respond_to do |format|
format.html {redirect_to new_user_dashboard_index_path}
format.js
end
end
The above syntax might be confusing, but it is important to understand only one of the lines gets executed. In
this sense, respond_to is more like an if-then-else
statement than a series of sequential lines. When there is an Ajax request(i.e, when remote: true is set) then format.js will be executed otherwise format.html will be executed.
Creating Javascript embedded ruby file
When format.js will be executed, rails automatically calls a Javascript embedded ruby(.js.erb) file with the same name as the action name.
Inside a JS-ERb file, Rails automatically provides the
jQuery JavaScript helpers needed to manipulate the page
using the Document Object Model (DOM). JS-ERb files also allow the use of embedded Ruby which we apply in the save_new_user.js.erb file to render a partial with user information. We'll use the escape_javascript method.
save_new_user.js.erb
$("#show_user_information").html("<%= escape_javascript render(partial: 'dashboard/show_user_information', locales: { user: @user }) %>");
The $("#show_user_information") will select the element with id show_user_information and html will update this element with the content present in its argument. Below is the code for show_user_information partial:
_show_user_information.html.erb
`
First Name: <%= @user.first_name %>
Last Name: <%= @user.last_name %>
Email: <%= @user.email %>
`
So, with all this, you can enter the user information, save it in the database and then show that information on the same page without the page reload.
Before submitting the form:
After form submission:
Top comments (1)
Awesome explanation. Nice work. Keep it up.