Rails – Sử dụng jQuery

5/5 - (6 votes)

jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more – Viết ít hơn, làm nhiều hơn. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. (Theo Vietjack)

Trong phần này chúng ta sẽ sử dụng jQuery để đổi màu nền cho giỏ hàng khi thêm mới sản phẩm.

Đầu tiên chúng ta sửa phương thức create của lớp LineItemsController như sau:

class LineItemsController < ApplicationController
    .
    .
    .
    # POST /line_items
    # POST /line_items.json
    def create
        @cart = current_cart
        product = Product.find(params[:product_id])
        @line_item = @cart.add_product(product.id)
 
        respond_to do |format| 
            if @line_item.save
                format.html { redirect_to('/', :notice => 'Line item was successfully created') } 
                format.js   { @current_item = @line_item }
                format.json { render :show, status: :created, location: @line_item }
            else
                format.html { render :new }
                format.json { render json: @line_item.errors, status: :unprocessable_entity }
            end
        end
    end
    .
    .
    .
end

Chúng ta truyền thêm biến instance là @current_item có giá trị là biến @line_item đã khai báo ở trên.

Tiếp theo chúng ta sửa file partial _line_item.html.erb trong thư mục app/views/line_items như sau:

<% if @current_item != nil %>
    <% if @current_item.id == line_item.id %>
<tr id="current_item">
    <% else %>
<tr>
    <% end %>
<% end %>
    <td><%= line_item.quantity%>x</td>
    <td><%= line_item.product.title %></td>
    <td class="item_price"><%= number_to_currency(line_item.total_price) %></td>
</tr>

Mục đích của đoạn code trên là gán thuộc tính id có giá trị là "current_item" vào thẻ <tr> nào đang hiển thị sản phẩm vừa được thêm vào.

Mỗi lần file partial này được gọi thì đầu tiên chúng ta kiểm tra xem biến @current_item được truyền qua có phải nil hay không, bởi vì file partial này còn được gọi từ nhiều nơi khác nữa mà biến @current_item không tồn tại. Tiếp theo chúng ta kiểm tra xem biến @currrent_item này có id giống với biến line_item đang được dùng để hiển thị hay không, vì trong một giỏ hàng có nhiều sản phẩm, nhưng sản phẩm vừa được thêm vào thì chỉ có một loại, và nếu trùng id thì chúng ta khai báo thẻ <tr> có id là current_item, ngược lại thì không có.

Tiếp theo chúng ta sửa file create.js.erb trong thư mục app/views/carts như sau:

var content = "<%= escape_javascript(render(current_cart)) %>";
document.getElementById("cart").innerHTML = content;

$("#current_item").css({'background-color':'#88ff88'});
$("#current_item").animate({backgroundColor:'#114411'}, 1000 );

Chúng ta sử dụng jQuery để tạo hiệu ứng phát sáng màu nền rồi giảm dần trong 1 giây cho thẻ <tr> có thuộc tính id là current_item. Nếu bạn chưa từng làm việc với jQuery thì tìm hiểu thêm trên mạng, ở đây mình không giải thích.

Để có thể sử dụng thì chúng ta cần khai báo jQuery trong file application.html.erb như sau:

<!DOCTYPE html>
<html>
<head>
<title>Books Store</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body id="store">
    <div id="banner">
        <%= image_tag("logo.png") %>
        <%= @page_title || "Books Store" %>
    </div>
    <div id="columns">
        <div id="side">
        <div id="cart"> 
            <%= render current_cart %>
        </div>
 
        <a href="#">Home</a><br />
        <a href="#">FAQ</a><br />
        <a href="#">News</a><br />
        <a href="#">Contact</a><br />
    </div>
    <div id="main">
        <%= yield %>
    </div>
    </div> 
</body>
</html>

Kết quả sẽ được như hình sau: