Ruby on Rails AJAX

Introduction

AJAX stands for Asynchronous JavaScript and XML. It is a method of exchanging data with a server without reloading the web page. In Ruby on Rails, AJAX is used with JavaScript to create more dynamic and responsive web applications.

How to use AJAX in Ruby on Rails

Ruby on Rails provides an easy way to use AJAX through the use of the remote: true option in form_for and link_to helpers. This option sends an AJAX request to the server instead of a regular HTTP request.

AJAX with Forms

<%= form_for @user, remote: true do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

In the above code, the remote: true option is added to the form_for helper. This sends an AJAX request to the server when the form is submitted, instead of a regular HTTP request.

AJAX with Links

<%= link_to "Edit User", edit_user_path(@user), remote: true %>

In the above code, the remote: true option is added to the link_to helper. This sends an AJAX request to the server when the link is clicked, instead of a regular HTTP request.

AJAX Responses

After an AJAX request is sent to the server, the server responds with data. This data can either be HTML, JavaScript or JSON.

HTML Response

# app/controllers/users_controller.rb

def create
  @user = User.new(user_params)
  respond_to do |format|
    if @user.save
      format.html { redirect_to @user, notice: 'User was successfully created.' }
      format.json { render :show, status: :created, location: @user }
    else
      format.html { render :new }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end

In the above code, the create action responds to both HTML and JSON formats. If the user is successfully saved, the action redirects to the user's show page with a notice. If the user is not successful, the action renders the new form again.

JavaScript Response

# app/controllers/users_controller.rb

def create
  @user = User.new(user_params)
  respond_to do |format|
    if @user.save
      format.html { redirect_to @user, notice: 'User was successfully created.' }
      format.js # renders create.js.erb
    else
      format.html { render :new }
      format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end

In the above code, the create action responds to both HTML and JavaScript formats. If the user is successfully saved, the action renders create.js.erb, which can contain JavaScript code to update the webpage.

JSON Response

# app/controllers/users_controller.rb

def show
  @user = User.find(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @user }
  end
end

In the above code, the show action responds to both HTML and JSON formats. If the requested format is JSON, the action renders the user object as JSON.

Conclusion

Using AJAX in Ruby on Rails can make your web application more dynamic and responsive. By sending asynchronous requests to the server, your application can update parts of the page without reloading the entire page.