Agile Web Development with Rails, Edition 4

11.3 Iteration F3: Highlighting Changes

Assign the current item to be the line item in question

edit app/controllers/line_items_controller.rb

  def create

    @cart = current_cart

    product = Product.find(params[:product_id])

    @line_item = @cart.add_product(product.id)

    @line_item.product = product

    respond_to do |format|

      if @line_item.save

        format.html { redirect_to store_url }

        format.js   { @current_item = @line_item }

        format.json { render :json => @line_item,

          :status => :created, :location => @line_item }

      else

        format.html { render :action => "new" }

        format.json { render :json => @line_item.errors,

          :status => :unprocessable_entity }

end

end

end

Add the id to the row in question

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

<% if line_item == @current_item %>

<tr id="current_item">

<% else %>

<tr>

<% end %>

  <td><%= line_item.quantity %>&times;</td>

  <td><%= line_item.product.title %></td>

  <td class="item_price"><%= number_to_currency(line_item.total_price) %></td>

</tr>

Animate the background color of that row

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

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

$('#current_item').css({'background-color':'#88ff88'}).

  animate({'background-color':'#114411'}, 1000);

Pull in the jquery-ui libraries

edit app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will

// include all the files listed below.

//

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,

// vendor/assets/javascripts, or vendor/assets/javascripts of plugins, if any,

// can be referenced here using a relative path.

//

// It's not advisable to add code directly here, but if you do, it'll appear at

// the bottom of the the compiled file.

//

// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY

// BLANK LINE SHOULD GO AFTER THE REQUIRES BELOW.

//

//= require jquery

//= require jquery-ui

//= require jquery_ujs

//= require_tree .