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

    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("<%= escape_javascript render(@cart) %>");

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

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

Make the jquery-ui libraries available to the application

edit Gemfile

gem 'jquery-rails'

gem 'jquery-ui-rails'

Install the gem

bundle install --local

Resolving dependencies...

Using rake (10.1.1)

Using multi_json (1.8.4)

Using activesupport (3.1.12) from source at /home/rubys/git/rails

Using builder (3.0.4)

Using i18n (0.6.9)

Using activemodel (3.1.12) from source at /home/rubys/git/rails

Using erubis (2.7.0)

Using rack (1.3.10)

Using rack-cache (1.2)

Using rack-mount (0.8.3)

Using rack-test (0.6.2)

Using hike (1.2.3)

Using tilt (1.3.7)

Using sprockets (2.0.4)

Using actionpack (3.1.12) from source at /home/rubys/git/rails

Using mime-types (1.25.1)

Using polyglot (0.3.3)

Using treetop (1.4.15)

Using mail (2.4.4)

Using actionmailer (3.1.12) from source at /home/rubys/git/rails

Using arel (2.2.3)

Using tzinfo (0.3.38)

Using activerecord (3.1.12) from source at /home/rubys/git/rails

Using activeresource (3.1.12) from source at /home/rubys/git/rails

Using bundler (1.5.2)

Using coffee-script-source (1.7.0)

Using execjs (2.0.2)

Using coffee-script (2.2.0)

Using rack-ssl (1.3.3)

Using json (1.8.1)

Using rdoc (3.12.2)

Using thor (0.14.6)

Using railties (3.1.12) from source at /home/rubys/git/rails

Using coffee-rails (3.1.1) from source at /home/rubys/git/coffee-rails

Using jquery-rails (3.1.0)

Using jquery-ui-rails (4.1.1)

Using rails (3.1.12) from source at /home/rubys/git/rails

Using sass (3.2.14)

Using sass-rails (3.1.7) from source at /home/rubys/git/sass-rails

Using sqlite3 (1.3.8)

Using uglifier (2.4.0)

Your bundle is complete!

Use `bundle show [gemname]` to see where a bundled gem is installed.

Pull in the blind effect from the jquery-ui libraries

edit app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into including all the files

// listed below. Add new JavaScript/Coffee code in separate files in this

// directory and they'll automatically be included in the compiled file

// accessible from http://example.com/assets/application.js It's not advisable

// to add code directly here, but if you do, it'll appear at the bottom of the

// the compiled file.

//

//= require jquery

//= require jquery.ui.effect-blind

//= require jquery_ujs

//= require_tree .