Ajax rails cơ bản

Xin chào các bạn. Gió mùa về rồi. Lạnh lạnh rồi đấy :v Không có gấu ôm nên ngồi lảm nhảm chia sẻ chút kiến thức mình vừa mới lĩnh hội được từ cao thủ võ lâm về Rails Ajax cho các bạn cùng đọc và tham khảo, rất có thể sẽ giúp ích đôi chút gì đó cho vấn đề bạn cần giải quyết hoặc không cũng mất vài phút cuộc đời để đọc bài viết của tớ chẳng hản :3 Thôi vào vấn đề chính đây:

1. Ajax là gì? Đôi khi bạn muốn thay đổi nội dung hay một trạng thái của button trên trang web mà không muốn load lại toàn bộ trang làm chậm tốc độ hay khi mạng chậm là cả một cực hình khi lướt web. Đơn cử như một dòng comment trong một bài Review của một trang giới thiệu Book chẳng hạn. Khi đó thì ajax lại trở lên cần thiết cho bạn để đáp ứng yêu cầu trên. Vậy Ajax là gì?

Ajax(Asynchronous JavaScript and XML) là một kĩ thuật sử dụng javascript trên trình duyệt để gửi/nhận ngầm định request đến server. Khi nhận được kêt quả trả về sẽ sử dụng javascript để thay đổi phần nội dung cần thay đổi trong trang. Để dễ hiệu ta đi vào ví dụ cụ thể sau:

2. Ví dụ

Mình sẽ sử dụng rails ajax để sử lý vấn đề. Create comment trong một review book.

a) Create comment.

Ở đây mình cần 3 file để thao tác sử lý.

• comments_controller.rb
• Trong view có 2 file là
  • app/view/review/index.html => để hiển thị comment
  • app/view/comment/create.js.erb

Trong file comments_controller.rb

   def create
      @comment = current_user.comments.build comment_params
      @comment.review_rate_id = @review.id
      if @comment.save
   #ajax----------------------------
        respond_to do |format|
          format.html {redirect_to book_review_rate_path @review.book, @review}
          format.js
        end
  #ajax----------------------------
      else
        render :new
      end
   end

Ở đây mình tạo comment. Nếu save thành công thì mình sẽ ajax để reder đến trang Review book chứa comment đó.

Trong file create.js.erb

 # đoạn ajax  1
  $('.ajax-form-create').html('<%= j render "comments/comment_form",
      review: @review, comment: @comment,
      button_name: t("review.comment.comment") %>');
# đoạn ajax 2
  $('.div-create').html('<%= j render "review_rates/comments",
      comments: @review.comments.desc %>').appendTo('.div-create');

Ở đây mình có 2 class html là class="ajax-form-create" và class="div-create". Ở đoạn ajax 1 mình sẽ render comment form (form để tạo comment) vào div chứa class="ajax-form-create" với biến truyền vào form comment gồm review: @review, comment: @comment, button_name là tên bạn đặt cho nút submit ở đây là "Create comment".

Đoạn ajax thứ 2. Mình sẽ hiển thị tất cả comments trong database ra div có class là class="div-create" và appendTo(chèn nội dung vào thành phên thẻ div đã tồn tại) vào thẻ div đó.

Trong file index.html.erb

Bạn đặt 2 thẻ div ở nơi bạn sẽ để comment form và hiển thị comments.

  ...
  ...
  #Form để tạo comment
  <div class="ajax-form-create">
      <%= render "comments/comment_form",
        review: @review, comment: @comment,
        button_name: t("review.comment.comment") %>
  </div>
  #Nơi hiện thị các comment
  <div class="div-create">
      <%= render "review_rates/comments",
        comments: @review.comments %>
  </div>
  ...
  ...

Ngoài ra form-comment có dạng như sau với 3 đối số truyền vào: review, commentvaf button_name

Lưu ý. Để sử dụng ajax bạn phải có remote: true ở form để thực hiện ajax

<%= form_for [review, comment], remote: true do |f| %>
  <div class="form-group">
    <%= f.text_field :content %>
  </div>
  <div class="form-group">
    <%= f.submit button_name %>
  </div>
<% end %>

Trên đó là cách sử dụng ajax đơn giản để tạo ra một comment

Thêm: Sử dụng thẻ link_to

Ngoài ra các bạn có thể sử dụng ajax ở link_to các bạn thêm thuộc tính remote: true vào trong thẻ điển hình như edit hay delete comment.

Bạn cũng cần sử dụng ở controller và tạo 1 file edit.js.erb và destroy.js.erb