A few months ago, I wrote an tutorial article titled Tutorial: Filtering Results with jQuery UI Slider and Rails.

After getting Rails 3 Beta 3 up and running, I wanted to get an app running from scratch using Rails 3 Beta 3. I chose the app in the original tutorial because it was dead simple and wouldn’t take much time at all to do.

Before proceeding with this tutorial, make sure that Rails 3 Beta 3 is running. Use my tutorial. I’ll wait…

All installed and ready to go? Good. Without further ado, here we go.

Setting Up

First of all, let’s visualize what we want to achieve. In my example, I have 20 dummy stocks that I want to filter down based on a high and low price. Here is a sample screen shot:

We’re going to start from scratch from a brand new Rails project. So we’ll have to create it:

rails jquery_slider_rails3

Since we didn’t pass a -d option, the Rails 3 generator will use the SQLite database by default. That’s perfectly fine for this example.

Bundle me Some Gems

Now that Rails has created a new project for us, let’s open it up and take a look at the Gemfile.

If you’ve followed my tutorial to install Rails 3 Beta 3, this file should be familiar by now and you’ve probably already installed some gems with Bundler. If not, let’s do that now.

Make sure that you see the following line for SQLite:

gem 'sqlite3-ruby', :require => 'sqlite3'

Since we’re going to do some simple model specs, we’ll need to install RSpec and RSpec Rails. This is done by editing the Gemfile and adding the following:

# Bundle gems for certain environments:
group :test do
  gem 'rspec', '>= 2.0.0.beta.7'
  gem 'rspec-rails', '>= 2.0.0.beta.7'
end

You’ll notice that these gems belong to their own test group. This means that those gems will only be loaded in the test environment.

We’re also going to use the Faker gem to generate some fake names for our stocks. Add the following to the Gemfile (I put mine directly beneath the sqlite gem declaration).

gem 'faker'

Now that we have the necessary gems defined, we’ll go ahead and install them using Bundler.

bundle install

Generating our Model

Before we can start creating our model, we’ll need to tell Rails that we’re using RSpec. First let’s expose the generators to Rails.

Open the application.rb and uncomment the config.generators block so that it looks like this:

config.generators do |g|
  g.orm             :active_record
  g.template_engine :erb
  g.test_framework  :rspec, :fixture => true, :views => false
end

Then run the rspec installer.

rails g rspec:install

Once that’s been completed, we’re ready to move onto the next step, setting up our model.

rails g model Stock name:string price:integer

You should see something like:

      
      invoke  active_record
      create    db/migrate/20100418065519_create_stocks.rb
      create    app/models/stock.rb
      invoke    rspec
   identical      spec/models/stock_spec.rb
   identical      spec/fixtures/stocks.yml

Defining our Specs

Let’s start defining some behavior for our app. First we want to make sure that we can create a stock with a name and a price. Open the file stock_spec.rb in ~/spec/models and remove any generated code so that it looks like:

require 'spec_helper'
describe Stock do
end

Add the following lines in between the describe block:

  it "should be valid with valid attributes" do
    stock = Stock.new(:name => 'Foo', :price => 1)
    stock.should be_valid
  end

You’ll get an error if you run your spec right now because we haven’t created a test database or defined the migration. Go and run rake or rake spec if you want to see a spectacular failure in your terminal.

Since we actually want the spec to pass, let’s go and create our databases and define our migration. Creating databases is just like in previous versions of Rails.

rake db:create:all

Open the migration file located at ~/db/migrate. Most of it should already be defined but since we’re going to be filtering on price, we’ll go ahead and create an index on that column.

Your migration file should look like this:

class CreateStocks < ActiveRecord::Migration
  def self.up
    create_table :stocks do |t|
      t.string :name
      t.integer :price

      t.timestamps
    end
    
    add_index :stocks, :price
  end

  def self.down
    drop_table :stocks
  end
end

Migrating, just like creating database, is no different in Rails 3.

rake db:migrate
rake db:migrate RAILS_ENV=test

Now that we have a test database and migration run, we can run our spec using rake. You should see something like:

..

Finished in 0.0418 seconds
2 examples, 0 failures

Let’s define some more specs. We’ll always want to order the stocks by lowest price (unless we override it). Note: Normally this is where you’d start using a factory like Factory Girl or Machinist but the app is so simple it’s overkill.

Our second spec looks like this:

  it "should return stock in price ascending order by default" do
    stock_1 = Stock.create(:name => 'Foo', :price => 300)
    stock_2 = Stock.create(:name => 'Foo', :price => 400)
    stock_3 = Stock.create(:name => 'Foo', :price => 200)
    stock_4 = Stock.create(:name => 'Foo', :price => 100)
    
    Stock.all.should == [stock_4, stock_3, stock_1, stock_2]
  end

If we run our spec, it’ll fail because the default order defaults to name DESC. So we have to write some implementation code to fix our failing spec.

Open the stock.rb file located in ~/app/models. Since we want it always to order our stocks by price (lowest to highest), we can use something that was introduced in Rails 2.3; default_scope.

If you’re familiar with Rails 2, you’ll notice that the syntax of this is a bit different.

default_scope order('price ASC')

If we run rake spec again, we’ll see that we have another passing spec. Let’s move onto the next one.

We also know that we want to filter our stock prices based on low and high value dynamically. We can write a simple spec for this too. Basically what we want is "give me all of the stocks that have a price between 200 and 300 inclusive.

  it "should filter out stocks that aren't in our range" do
    stock_1 = Stock.create(:name => 'Foo', :price => 100)
    stock_2 = Stock.create(:name => 'Foo', :price => 200)
    stock_3 = Stock.create(:name => 'Foo', :price => 300)
    stock_4 = Stock.create(:name => 'Foo', :price => 400)
    Stock.filter(200,300).should == [stock_2, stock_3]
  end

Again, if we run rake spec, we’ll have a failing spec since we haven’t created the filter method. For this, we’ll be relying on scopes again.

scope :filter, lambda { |low, high| where(:price => low..high) }

If you’re familiar with Rails 2, you’ll notice that named_scope has been replaced with just scope. Also, you can see some of Arel’s new syntax.

Running rake spec gives us our next passing spec.

Creating our controller and views

Rails 3 syntax for creating controllers is pretty much unchanged from previous versions of Rails.

rails g controller stocks index

This creates our stocks controller with an index method. Open the newly created file at ~/app/controllers/stocks_controller.rb. For now, let’s just display all of the stocks and then we’ll worry about filtering them down.

  def index
    @stocks = Stock.all
  end

Open the corresponding view file by going to ~/app/views/stocks/index.html.erb.

Let’s create a simple view.

<h1>Stocks</h1>

<div id="x_slider"></div>

<div>
  <p>Showing all stocks between <span id="x_low_selected"><%= @price_range.first %></span> and <span id="x_high_selected"><%= @price_range.last %></span></p>
</div>

<ul id="x_stock_list">
  <%= render @stocks %>
</ul>

As you’ll notice, I’ve rendering out the variable @stocks in order for this to work, we have to create a stock partial. In ~/app/views/stocks we’ll create a new empty file with the file name of _stock.html.erb with the following code:

<li>
  <p><%= stock.name %></p>
  <p><%= stock.price %></p>
</li>

The render method has gotten pretty smart as of late, so we don’t have to write our own each do loop here as long as the name of the instance variable (@stocks – plural) matches the name of the partial (_stock.html.erb – singular).

Astute readers will notice that I’m referencing an instance variable called @price_range. If you try to load the app right now in the browser, you’ll get an error since we haven’t set up the @price_range variable. In the previous tutorial, I had a class method on stock that grabbed the lowest and highest prices and put them into an array. We’ll duplicate that now.

Back to RSpec

Before we define the class method, we should define a spec for it.

  it "should return the highest and lowest stock prices" do
    stock_1 = Stock.create(:name => 'Foo', :price => 100)
    stock_2 = Stock.create(:name => 'Foo', :price => 200)
    stock_3 = Stock.create(:name => 'Foo', :price => 300)
    stock_4 = Stock.create(:name => 'Foo', :price => 400)
    Stock.low_high_prices.should == [100, 400]
  end

Now we just need to create our class method. It’s a simple one:

  def self.low_high_prices
    [Stock.minimum(:price), Stock.maximum(:price)]
  end

Running rake spec now gives us another passing spec. We’re getting close to spinning up the app but we’ll want to create some dummy data first.

Loading Sample Data

We can (mis)use the rake db:seed for this purpose. Remember that faker gem that we put into our Gemfile a long time ago? Here is where we’ll use it.

Open up the seeds.rb file located at ~/db/seeds.rb and we’ll add the following:

20.times do
  Stock.create(:name => Faker::Lorem.words(1).join, :price => rand(5 * 100))
end

This just creates a stock with a random name (thanks to Faker) with a random price. One thing of note here. The words method in Faker::Lorem creates an array. We really want this to be a string but since we’re using Ruby 1.9.2 we can’t just call a .to_s on it as the just returns and array with a string in it. I found that using .join without any arguments produces the result that we want.

Let’s load up our sample data.

rake db:seed

Now we should have 20 dummy stocks waiting for us. Let’s take a look.

Booting the Application

Before we can actually see anything in the browser, we can to create a simple resourceful route for our stocks. Routing is one of the things that’s changed dramatically in Rails 3 so I suggest that you read through the commented code in the routes files (~/config/routes.rb).

Once you’ve given the routes file a once over, let’s go ahead and add our route. I Added mine right at the top:

resources :stocks

Simple, isn’t it?

In your terminal fire up a web server by running

rails server

Now we’re ready to see something in our browser. Load up http://0.0.0.0:3000/stocks and you should see the stock list.

Let’s Make it Dynamic

In order to make this dynamic, we’re going to have to download some files.

Since we’re opting to use jQuery, we’re going to use the Rails 3 jQuery specific driver. Find the rails.js in ~/public/javascripts and remove it. Download the jQuery driver to the ~/public/javascripts directory.

We’ll need to install jQuery and jQuery UI but we can kill two birds with one stone by downloading jQuery UI. The download will come in a zip file, extract the contents and copy the contents of the js directory to ~/public/javascripts.

You’ll also need to copy the CSS file located in [extracted_zip_file]/css/[theme_name] to ~/public/stylesheets. Finally copy the contents of the images directory to ~/public/images.

I’ve noticed that there is a little tweak that we have to make to the CSS file. Open it up and do a find and replace on ‘images/’ to ‘/images/’. This will prevent Rails from searching for the images in ~/stylesheets/images/…

Once all of the Javascript files have been downloaded, we need to tell Rails to use them. Open the application.html.erb file in ~/views/layouts and add the following lines inside the head tag:

  <%= stylesheet_link_tag :all, 'jquery-ui-1.8.custom' %>
  <%= javascript_include_tag 'jquery-1.4.2.min', 'jquery-ui-1.8.custom.min', 'rails' %>
  <%= csrf_meta_tag %>

The jQuery UI slider library takes care of most of the heavy lifting. Here is the final slider Javascript code with an explanation below it of all of the settings.

<script type="text/javascript">
  $(function() {
    $("#x_slider").slider( { 
      range: true,
      step: 10,
      max: <%= @price_range.last %>,
      min: <%= @price_range.first %>,
      values: [<%= @price_range.first %>, <%= @price_range.last %> ],
      stop: function(event, ui) {
        var prices = $('#x_slider').slider('option', 'values');
        $('#x_low_selected').html(prices[0]);
        $('#x_high_selected').html(prices[1]);
        $.ajax({
          type: "GET",
          data: ({ low: prices[0], high: prices[1] }),
          url: 'http://0.0.0.0:3000/stocks',
          dataType: 'script'
        });
      }
    });
  });
</script>

Before we bind the slider to our div, we’ll wrap everything in a convenience function to make sure that the DOM is loaded.

Next we bind the slider by simply writing:

$("x_slider").slider( { options here }

As you can see in the code above, the slider takes several options (see full documentation for all options):

• Range
  • When this is set to true, you’ll get two or more points on the slider
  • Step
  • This is the value that the slider decrements or increments every time you move a point
• Max
  • The maximum value of the slider
• Min
  • The minimum value of the slider
• Values
  • An array of low and high points on the slider
• Stop
  • This is an event that is fired when a point on the slider stops moving

In the stop event there is a bunch of stuff going on. First, I set a price array to the set points on the slider so I can use them later for updating the user of the min and max values as well as passing those in as parameters to the ajax call.

This code snippet simply replaces the min and max values on the page:

$('#x_low_selected').html(prices[0]);
$('#x_high_selected').html(prices[1]);

The ajax function also has several options:

• Type
  • This is the type of HTTP request. A simple GET request will do here
• Data
  • These are the variables that we’ll be sending along
• URL
  • This is the URL that we’ll be hitting – this assumes that you’ve started the web server using script/server or mongrel_rails
• DataType
  • I originally set this to html thinking that is what I wanted, but that’s the wrong call. You’ll want to use script if you want to return fragments of HTML otherwise you’ll return the whole page in HTML form (layout and all).

Wiring up the Slider to the Controller

We have one more thing to do in order to get our application up and running. We need to tell the controller to do its job.

Open the stocks_controller.rb file in ~/app/controllers/stocks_controller.rb and create an index method if one doesn’t already exist and populate it with the following:

  def index
    unless params[:low] && params[:high]
      @stocks = Stock.all
    else
      @stocks = Stock.filter(params[:low], params[:high])
    end
    
    @price_range = Stock.low_high_prices
  end

Since the the slider uses ajax for communication with the server, we’ll create an index.js.erb file in ~/app/views/stocks.

The file contains some simple Javascript code to execute:

$("#x_stock_list").html("<%= escape_javascript(render(@stocks)) %>");

With that little bit of Javascript code, every thing should be set to start up the application. To test it, start up the web server with the rails server command. Now in your web browser, go to http://0.0.0.0:3000/stocks and see the results.

Like before, I’ve made the code available for this tutorial on Github.