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)

    respond_to do |format|

      if @line_item.save

        format.html { redirect_to store_url }

        format.js   { @current_item = @line_item }

        format.json { render action: 'show',

          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

# Use jquery as the JavaScript library

gem 'jquery-rails'

gem 'jquery-ui-rails'

Install the gem

bundle install --local

Resolving dependencies...

Using rake 10.4.2

Using i18n 0.7.0

Using minitest 4.7.5

Using multi_json 1.11.2

Using thread_safe 0.3.5

Using tzinfo 0.3.44

Using activesupport 4.0.13 from source at /home/rubys/git/rails

Using builder 3.1.4

Using erubis 2.7.0

Using rack 1.5.5

Using rack-test 0.6.3

Using actionpack 4.0.13 from source at /home/rubys/git/rails

Using mime-types 2.6.1

Using mail 2.6.3

Using actionmailer 4.0.13 from source at /home/rubys/git/rails

Using activemodel 4.0.13 from source at /home/rubys/git/rails

Using activerecord-deprecated_finders 1.0.4

Using arel 4.0.2.20140205180311 from source at /home/rubys/git/arel

Using activerecord 4.0.13 from source at /home/rubys/git/rails

Using bundler 1.10.5

Using coffee-script-source 1.9.1.1

Using execjs 2.5.2

Using coffee-script 2.4.1

Using thor 0.19.1

Using railties 4.0.13 from source at /home/rubys/git/rails

Using coffee-rails 4.1.0 from source at /home/rubys/git/coffee-rails

Using hike 1.2.3

Using jbuilder 1.5.3

Using jquery-rails 3.1.3

Using jquery-ui-rails 5.0.5

Using json 1.8.3

Using tilt 1.4.1

Using sprockets 2.12.4

Using sprockets-rails 2.1.4 from source at /home/rubys/git/sprockets-rails

Using rails 4.0.13 from source at /home/rubys/git/rails

Using rdoc 4.2.0

Using sass 3.4.16

Using sass-rails 5.0.3 from source at /home/rubys/git/sass-rails

Using sdoc 0.4.1

Using sqlite3 1.3.10

Using turbolinks 2.5.3

Using uglifier 2.7.1

Bundle complete! 12 Gemfile dependencies, 42 gems now installed.

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 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 compiled file.

//

// Read Sprockets README

// (https://github.com/sstephenson/sprockets#sprockets-directives) for details

// about supported directives.

//

//= require jquery

//= require jquery-ui/effect-blind

//= require jquery_ujs

//= require turbolinks

//= require_tree .