Ajax cơ bản trong ứng dụng Rails

Đầu tiên, các bạn tạo ra project bằng câu lệnh:

rails new myapp
cd myapp

Sau đó thêm gem vào file Gemfile và chạy lệnh bundle install:

gem 'bootstrap-sass'

Sau đó tạo file custom.scss trong thư mực app/assets/stylesheets/custom.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

Tiếp theo, ta thêm vào app/assets/javascripts/application.js:

//= require bootstrap

Bây giờ chúng ta sẽ tạo ra model tên là Product:

rails g resource Product name price:decimal
rake db:migrate

Chúng ta đã có cơ sở dữ liệu, và bây giờ sẽ tạo thêm dữ liệu từ file seeds và chay lệnh rake db:seed:

Product.delete_all

Product.create!([
  {id: 1, name: "Nintendo Wii U Premium", price: 250},
  {id: 2, name: "XBox 360 250GB", price: 250},
  {id: 3, name: "Playstation 3 500 GB", price: 239.95},
  {id: 4, name: "Nintendo Wii", price: 99.95},
  {id: 5, name: "Nintendo 3DS", price: 174.95}
])

Trong file app/controllers/products_controller.rb, ta thêm các hàm CRUD:

class ProductsController < ApplicationController

  def index
    @products = Product.all
  end

  def show
    @product = Product.find(params[:id])
  end

  def new
    @product = Product.new
  end

  def create
    @products = Product.all
    @product = Product.create(product_params)
  end

  def edit
    @product = Product.find(params[:id])
  end

  def update
    @products = Product.all
    @product = Product.find(params[:id])

    @product.update_attributes(product_params)
  end

  def delete
    @product = Product.find(params[:product_id])
  end

  def destroy
    @products = Product.all
    @product = Product.find(params[:id])
    @product.destroy
  end

private
  def product_params
    params.require(:product).permit(:name, :price)
  end
end

Đồng thời cấu hình lại file route:

resources :products do
    get "delete"
end
root to: "products#index"

Ta tạo file app/views/products/index.html.erb:

<div class="container">
  <div class="well">
    <%= link_to "New Product", new_product_path, remote: true, class: "btn btn-primary" %>
  </div>
  <div class="new-product"></div>

  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </thead>
    <tbody class="product-index">
      <%= render "index" %>
    </tbody>
  </table>
</div>
<div id="product-modal" class="modal fade"></div>

Bây giờ chúng ta cần tạo thêm _index.html.erb:

<% @products.each do |product| %>
  <tr>
    <td><%= product.name %></td>
    <td><%= number_to_currency product.price %></td>
    <td><%= link_to "Edit", edit_product_path(product), remote: true, class: "btn btn-default" %></td>
    <td><%= link_to "Delete", product_delete_path(product), remote: true, class: "btn btn-danger" %></td>
  </tr>
<% end %>

Sau đó ta tạo fom dùng cho cho việc tạo mới và chỉnh sửa product:

app/views/products/_form.html.erb:

<div class="modal-dialog">
  <div class="modal-content">
    <%= form_for @product, remote: true, html: { style: "display:inline;" } do |f| %>
      <div class="modal-body">
        <ul class="errors"></ul>

        <div class="form-group">
          <%= f.label :name, class:"control-label" %>
          <%= f.text_field :name, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :price, class: "control-label" %>
          <%= f.text_field :price, class: "form-control" %>
        </div>
      </div>
      <div class="modal-footer">
        <%= f.submit class: "btn btn-primary" %>
        <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
      </div>
    <% end %>
  </div>
</div>

Tiếp theo, ta tạo file _new.html.rb file và _edit.html.erb:

app/views/products/_new.html.erb:
<div class="modal-header">
<h3>New Product</h3>
</div>
<%= render "form" %>

app/views/products/_edit.html.erb:
<div class="modal-header">
  <h3><%= "Editing #{@product.name}" %></h3>
</div>
<%= render "form" %>

Ở đây chúng ta cần dùng javascript để hiển thị được form:

app/views/products/new.js.erb:
$("#product-modal").html("<%= escape_javascript(render 'new') %>")
$("#product-modal").modal("show")

app/views/products/edit.js.erb:
$("#product-modal").html("<%= escape_javascript(render 'edit') %>")
$("#product-modal").modal("show")

Để lưu lại product mới hoặc product sau khi chỉnh sửa, ta tạo thêm 3 file:

app/views/products/_save.js.erb:
$("ul.errors").html("")
<% if @product.errors.any? %>
  <% @product.errors.full_messages.each do |message| %>
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>"))
  <% end %>
<% else %>
  $(".product-index").html("<%= escape_javascript(render 'index') %>")
  $("#product-modal").modal("hide")
<% end %>

app/views/products/create.js.erb
<%= render "save" %>

app/views/products/update.js.erb:
<%= render "save" %>

Cuối cùng, muốn xóa product ta tạo file app/views/products/_delete.html.erb:

<div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-header">
    <h3>Delete Product</h3>
  </div>
  <div class="modal-body">
  <ul class="errors"></ul>
  Are you sure you wish to delete <b><%= @product.name %></b>?
  </div>
  <div class="modal-footer">
    <%= link_to "Yes, Delete This Product", product_path(@product), method: :delete, remote: true, class: "btn btn-danger" %>
    <%= link_to "No, Please Don't", "#", class: "btn btn-default", data: { dismiss: "modal" } %>
  </div>
  </div>
</div>

app/views/products/delete.js.erb:
$("#product-modal").html("<%= escape_javascript(render 'delete') %>")
$("#product-modal").modal("show")

app/views/products/destroy.js.erb:
<%= render "save" %>

Bây giờ bạn có thể chạy lệnh rails s để xem thành quả của mình