Sortable List in Ruby on Rails 3 – Unobtrusive jQuery
Step 1 – create app
$ rails new books -d mysql
Step 2 – replace contents in rails.js with following (switch from prototype to jquery)
http://github.com/rails/jquery-ujs/blob/master/src/rails.jsStep 3 – bundler
Go to gemfile
gem "rails"
gem "mysql2"
gem "acts_as_list"
# go to console:
$ bundle install
gem "mysql2"
gem "acts_as_list"
# go to console:
$ bundle install
Step 4 – to be quick will scaffold a resource
$ cd books
$ rails g scaffold books name:string
# make sure your config/database.yml file is filled in correctly
$ rake db:create
$ rake db:migrate
$ rails g scaffold books name:string
# make sure your config/database.yml file is filled in correctly
$ rake db:create
$ rake db:migrate
# book.rb
class Book < ActiveRecord::Base
acts_as_list
end
class Book < ActiveRecord::Base
acts_as_list
end
Step 5 – add jquery to view and setup javascript content_for
Go to app/views/layouts/books.html.erbChange this:
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js", "rails.js" %>
<%= yield :javascript %>
Step 6 – seed the db
Go to db/seeds.rb
#db/seeds.rb
book = Book.create([{ :name => 'Harry Potter' }, { :name => 'Twilight' }, { :name => 'Bible' }])
# back to console
$ rake db:seed
# doesn't work - need to add the position column to books in database
$ rails g migration add_position_to_books position:integer
$ rake db:migrate
$ rake db:seed
book = Book.create([{ :name => 'Harry Potter' }, { :name => 'Twilight' }, { :name => 'Bible' }])
# back to console
$ rake db:seed
# doesn't work - need to add the position column to books in database
$ rails g migration add_position_to_books position:integer
$ rake db:migrate
$ rake db:seed
Step 7 – edit index for li – tables don’t work
<h1>Listing books</h1>
<ul id="books"> <% @books.each do |book| %>
<li id="book_<%= book.id %>"><span class="handle">[drag]</span><%= book.name %></li>
<% end %></ul>
<%= link_to 'New book', new_book_path %>
<ul id="books"> <% @books.each do |book| %>
<li id="book_<%= book.id %>"><span class="handle">[drag]</span><%= book.name %></li>
<% end %></ul>
<%= link_to 'New book', new_book_path %>
Step 8 – add javascript in view
# index.html.erb
<% content_for :javascript do %>
<%= javascript_tag do %>
// Sorting the list
$(document).ready(function(){
$('#books').sortable({
axis: 'y',
dropOnEmpty: false,
handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#books').sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#books').effect('highlight');
},
url: '/books/sort'})
}
});
});
<% end %>
<% end %>
<% content_for :javascript do %>
<%= javascript_tag do %>
// Sorting the list
$(document).ready(function(){
$('#books').sortable({
axis: 'y',
dropOnEmpty: false,
handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#books').sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#books').effect('highlight');
},
url: '/books/sort'})
}
});
});
<% end %>
<% end %>
Step 9 – controller
#books_controller.rb
def index
@books = Book.order('books.position ASC')
end
def sort
@books = Book.all
@books.each do |book|
book.position = params['book'].index(book.id.to_s) + 1
book.save
end
render :nothing => true
end
def index
@books = Book.order('books.position ASC')
end
def sort
@books = Book.all
@books.each do |book|
book.position = params['book'].index(book.id.to_s) + 1
book.save
end
render :nothing => true
end
Cursor
#style.css
.handle:hover{cursor: move;}
.handle:hover{cursor: move;}
Final step – routes
root to: "books#index"
resources :books do
post :sort, on: :collection
# ruby 1.8 would go :on => :collection
end
resources :books do
post :sort, on: :collection
# ruby 1.8 would go :on => :collection
end
http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/
No comments:
Post a Comment