005. Yellow fade effect with JQuery - cwy007/tips-and-skills GitHub Wiki

install gem

gem 'jquery-rails'
gem 'jquery-rails-ui'

require js and @import css

// app/assets/javascripts/application.js

//= require jquery
//= require jquery-ui

# app/assets/stylesheets/application.scss
@import "jquery-ui";

update app/controllers/line_items_controller.rb

# pass @current_item to view 

  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
        session[:counter] = 0
        format.html { redirect_to store_url }
        # update this line from format.js { @current_item = @line_item } 
        # to format.js { @current_item = @line_item }
        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

update app/views/line_items/_line_item.html.erb

<!-- add id to select current_item -->
<% if line_item == @current_item %>
<tr id="current_item">
<% else %>
<tr>
<% end %>
  <td class="item_image"><%= image_tag line_item.product.image_url %></td>
  <td><%= line_item.quantity %>&times;</td>
  <td><%= line_item.product.title %></td>
  <td class="item_price"><%= number_to_currency(line_item.total_price, unit: '¥') %></td>
  <td><%= link_to 'delete', line_item_path(line_item), method: :delete, remote: true %></td>
</tr>

update app/views/line_items/create.js.erb

$('#cart').html("<%=j render @cart %>")

// add this line
$('#current_item').effect("highlight", {color: '#DFF2BF'}, 1500);

ref link:

https://stackoverflow.com/questions/848797/yellow-fade-effect-with-jquery

source: book << agile web develop with rails 4 >>

⚠️ **GitHub.com Fallback** ⚠️