Sử Dụng AJAX trong Ruby on Rails

Ngày nay hầu hết các trang web đều sử dụng công nghệ AJAX để cải thiện trải nghiệm của người dùng thông qua cơ chế update từng phần dữ liệu trên trang mà không yêu cầu trình duyệt phải load lại toàn bộ trang. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu cách sử dụng AJAX trong Ruby on Rails framework.

Một tính năng phổ biến mà chúng ta thường thấy sự xuất hiện của AJAX đó là các trang bài viết cho phép tạo comment trên đó. Ở dưới mỗi bài viết sẽ có một form nhỏ mà người dùng có thể nhập nội dung comment và gửi đi.

Tạo Form Trong View

Phần view để hiển thị bài viết theo thông thường sẽ được đặt trong views/posts/show.html.erb. Phần view comments cho bài viết thông thường sẽ được đặt trong views/posts/_comments.html.erb. File view của comment này sau đó sẽ được load vào trong show.html.erb dưới dạng partial view. Chúng ta sẽ cần tạo một form comment ở trong partiel view _comments.html.erb.

Trong Ruby on Rails framework để tạo một form hỗ trợ AJAX thì chúng ta cần sử dụng :remote => true khi tạo form:

<h4 id="section-comment-title">Danh Sách Bài Viết</h4>
<%= form_for [@article, Comment.new], :remote => true do |f| %>
    <%= f.text_area :content, placeholder: "Nhập Nội Dung Cho Comment." %>
    <%= f.submit "Tạo Comment" %>
<% end %>

Form trên được tạo thông qua việc sử dụng thẻ form trong ERB và để hỗ trợ AJAX chúng ta sử dụng :remote => true trong thẻ form, ngoài ra chúng ta cũng tạo một thẻ <textarea> cho phép người dùng nhập nội dung comment và một thẻ <button> để người dùng thực hiện việc gửi comment.

Ngoài ra, để phân biệt được ai là người tạo comment và comment dành cho bài viết nào chúng ta cũng cần thêm hai trường input là ID của người dùng tạo comment và ID của bài viết. Form đầy đủ sẽ như sau:

<%= form_for [@article, Comment.new], :remote => true do |f| %>
    <%= f.text_area :content, placeholder: "Nhập Nội Dung Cho Comment." %>
    <%= f.hidden_field :post_id, :value => @post.id %>
    <%= f.hidden_field :user_id, :value => user.id %>
    <%= f.submit "Tạo Comment" %>
<% end %>

Hai trường input mới thêm vào thuộc loại hidden input và chúng sẽ không được trình duyệt hiển thị.

Vẫn ở trong form trên, nếu có comment nào đã được tạo ra chúng sẽ cần hiển thị chúng trong một thẻ div#comments như sau:

<div id="comments"></div>

<%= form_for [@article, Comment.new], :remote => true do |f| %>
    <%= f.text_area :content, placeholder: "Nhập Nội Dung Cho Comment." %>
    <%= f.hidden_field :post_id, :value => @post.id %>
    <%= f.hidden_field :user_id, :value => user.id %>
    <%= f.submit "Tạo Comment" %>
<% end %>

Lưu Bài Viết Trong Controller

Tiếp theo trong controller bạn cần tạo một method để xử lý việc lưu trữ nội dung comment được tạo bời người dùng:

  # POST /comments
  # POST /comments.json
  def create
    @comment = Comment.new(comment_params)

    respond_to do |format|
      if @comment.save
        format.html { redirect_to @comment.post, notice: 'Comment được tạo thành công' }
        format.js   { }
        format.json { render :show, status: :created, location: @comment }
      else
        format.html { render :new }
        format.json { render json: @comment.errors, status: :unprocessable_entity }
      end
    end
  end

Trong method create ở controller trên chúng ta sử dụng format.html, format.jsvà format.json để trả về dữ liệu cho trình duyệt trong trường hợp comment được lưu thành công. Trong đó format.json được sử dụng trong trường hợp request thực hiện dưới dạng AJAX. Trong trường hợp không thể lưu được bài viết chúng ta trả về lỗi 422 tương ứng với :unprocessable_entity trong Rails.

Hiển Thị Comment Sử Dụng JavaScript

Sau khi hoàn tất việc tạo logic trong controller, bạn đã có thể submit được comment sau khi hiển thị nội dung bài viết. Bước tiếp theo cần làm đó là hiển thị các comment được lưu cho bài viết. Bạn có thể thực hiện việc này trong file JavaScript create.js.erb:

# Thêm các comment được tạo ra cho bài viết vào trong phần tử "#comments" trên trang
$("#comments").append("<%= @comment.user.name %>: <%= @comment.content %>");
# Xoá nội dung của "#section-comment-title" nếu chưa có comment nào được tạo ra
$("h4#section-comment-title").hide(); 

Tới đây bạn đã tìm hiểu cách sử dụng AJAX trong Ruby on Rails thông qua sử dụng :REMOTE => TRUE trong form kết hợp với JavaScript. Nếu trong quá trình thực hiện bạn gặp phải lỗi 500 Internal Server thì bạn cần kiểm tra lại xem việc load partial view đã đúng hay chưa, các file partial được đặt đúng thư mục và đúng tên hay chưa. Ngoài ra nếu comments không được lưu hoặc không được hiển thị thì bạn cần kiểm tra file log của Ruby on Rails để chắc chắn rằng quá trình lưu bài viết được thực hiện thành công. Cuối cùng nếu bạn có thắc mắc hoặc có thêm ý kiến đóng góp nào thì bạn có thể để lại comment ở phía dưới bài viết.