Pagination is a very common task in web application development. But sometimes we need to paginate something with ajax request. The interest to use Ajax for this is to provide a dynamic interface which doesn’t need to reload the entire page when next results(page) displayed. Ajax is really nicely integrated with Rails, and using it is very easier with this great framework. To work with ajax requests your browser must be enabled to handled java script requests. I knew two methods for that problem.

First Method

Your Controller code

  def ajax_pagination_links

    @posts_pages, @posts= paginate :posts, :per_page => 3, :order=> “id DESC”

    respond_to do |format|

      format.html {render :partial=>”posts”,:layout=>”application”}

      format.js {render :update do |page|

        page.replace_html ‘total_posts’, :partial=>’total_posts’

        page.visual_effect :highlight, “total_posts”

      end}

    end

  end  

Layout

   <%= javascript_include_tag :defaults %>

View

    <%= render :partial=>'total_posts' %> 

_total_posts.rhtml

  <% for post in @posts %>  

    <%= truncate(h(post.title.capitalize!),50) -%>

    <%= truncate(h(post.description.capitalize!),50) -%>    

  <%end -%>   

  <%= link_to_remote 'Previous page',{:url=>{:action=>ajax_pagination_links, :page => @posts_pages.current.previous },  if @posts_pages.current.previous -%>

   <%= link_to_remote 'Next page', {:url=>{:action=>ajax_pagination_links, :page => @posts_pages.current.next} if @posts_pages.current.next -%>

Second Method

Put this code in a helper somewhere

def ajax_pagination_links(paginator, options={})

options.merge!(ActionView::Helpers::PaginationHelper::DEFAULT_OPTIO NS) {|key, old, new| old}

    window_pages = paginator.current.window(options[:window_size]).pages

    return if window_pages.length <= 1 unless 

    options[:link_to_current_page]

    first, last = paginator.first, paginator.last

    returning html = '' do

    if options[:always_show_anchors] and not window_pages[0].first?  

      html << link_to_remote(first.number, :update => options[:update], :url => { options[:name] => first }.update(options[:params] ))

      html << ' ... ' if window_pages[0].number - first.number > 1

      html << ' '

    end

    window_pages.each do |page|

      if paginator.current == page && !options[:link_to_current_page]   

        html << page.number.to_s   

      else

        html << link_to_remote(page.number, :update => options[:update], :url => { options[:name] => page }.update(options[:params] ))

      end

      html << ' '

      end

      if options[:always_show_anchors] && !window_pages.last.last?   

        html << ' ... ' if last.number - window_pages[-1].number > 1

        html << link_to_remote(paginator.last.number, :update => options[:update], :url => { options[:name] => last }.update( options[:params]))

      end

    end   

  end   

and use following code for creating links

View

<%= ajax_pagination_links @posts_pages, {:params => {:posts => @posts} } %>   

Recently I needed to implement star rating system for one of my project I am working on.

If you are not familiar with a star rating system, its simply a method of voting using (usually) 5 stars in a row, which will change colour as you hover over them indicating the level at which to rate something. You may think a simple rollover would accomplish this but difficulty arises because as you rollover each star it should stay highlighted while you light up the next one and so on until the end of the row of stars.

If this doesnt make much sense to you then take a look at what we are going to achieve in this article. (I will leave the server-side coding to someone more knowledgeable and we will just concentrate on the visual aspects of making this effect happen. )

As you can see from the demo the stars stay hovered as you rollover each one. However, as mentioned earlier, the complicated part is that as each star is hovered it should stay alight while the next one is hovered so that if you start at the left side then 1,2,3,4 and 5 stars will be alight as you traverse the row. Usually a rollover will only be active on the anchor that the pointer is currently over making previous anchors lose their focus and thus their hover effect disappear.



Install the acts_as_rateable plugin.

Run the following from the root of your Rails app to install the plugin.

script/plugin install http://juixe.com/svn/acts_as_rateable  

or
http://rubyforge.org/projects/rateableplugin/

Create the table(migration) to store rating into database

class CreateRatings< ActiveRecord::Migration 

  def self.up

    create_table :ratings, :force => true do |t|

      t.column :rating, :integer, :default => 0

      t.column :created_at, :datetime, :null => false

      t.column :rateable_type, :string, :limit => 15, :default => “”, :null => false

      t.column :rateable_id, :integer, :default => 0, :null => false

      t.column :user_id, :integer, :default => 0, :null => false  

    end

    add_index :ratings, [”user_id”], :name => “fk_ratings_user”

  end

  def self.down

    drop_table :ratings

  end

end  

models rateable

I was trying to add a rating system for the model Picture. Yours can obviously be whatever you like but from here on out I’ll be using Picture. So add acts_as_rateable to your model.

  class Picture < ActiveRecord::Base

    acts_as_rateable

    ...

  end

Controller to handle the rating

 class RatingController < ApplicationController
   

   def rate   

     @picture = Picture.find(params[:id])  

     Rating.delete_all(["rateable_type = 'Picture' AND rateable_id = ? AND user_id = ?", @picture.id, current_user.id]) 

     @picture.add_rating Rating.new(:rating => params[:rating], :user_id => current_user.id) 

   end 

 end  

Views

Create the partial /views/rating/_rating.rhtml

  <%= number_with_precision(picture.rating, 1) %>/5 Stars

    < ul class='star-rating' >

      < li class='current-rating' style='width:<%= (picture.rating * 30).to_i -%>px;’ >

          Currently <%= number_with_precision(picture.rating, 1) %>/5 Stars.

       < /li >

      < li >

        <%= link_to_remote( "1", {:url => { :controller => “rating”, :action => “rate”, :id => picture.id, :rating => 1}}, :class => ‘one-star’, :name => ‘1 star out of 5′) %>

      < /li >

      < li >

        <%= link_to_remote( "2", {:url => { :controller => “rating”, :action => “rate”, :id => picture.id, :rating => 2}}, :class => ‘two-stars’, :name => ‘2 stars out of 5′) %>

      < /li >

      < li >

        <%= link_to_remote( "3", {:url => { :controller => “rating”, :action => “rate”, :id => picture.id, :rating => 3}}, :class => ‘three-stars’, :name => ‘3 stars out of 5′) %>

      < /li > 

      < li >

        <%= link_to_remote( "4", {:url => { :controller => “rating”, :action => “rate”, :id => picture.id, :rating => 4}}, :class => ‘four-stars’, :name => ‘4 stars out of 5′) %>

      < /li >

      < li >

        <%= link_to_remote( "5", {:url => { :controller => “rating”, :action => “rate”, :id => picture.id, :rating => 5}}, :class => ‘five-stars’, :name => ‘5 stars out of 5′) %>

      < /li >

   < /ul >

A little RJS

Create the file /views/rating/rate.rjs

   page.replace_html “star-ratings-block”, :partial =>  rating/rating’, :locals => { :picture=> @picture }  

This will replace the star ratings with the partial we created previously in order to reflect any rating changes made by the submission.

Render the partial in one of your views.

  < div id="star-ratings-block" >

     <%= render :partial => “rating/rating”, :locals => { :picture => @picture } %>   

  < /div >

This needs @picture(or whatver you’re going to be using) in order to function.

Remember to add the css and image

/* styles for the star rater */    

.star-rating{    

    list-style:none;    

    margin: 0;    

    padding:0;    

    width: 150px;    

    height: 30px;    

    position: relative;    

    background: url(/images/star_rating.gif) top left repeat-x;    

} 

.star-rating li{    

    padding:0;    

    margin:0;    

    float: left;    

}  

.star-rating li a{    

    display:block;    

    width:30px;    

    height: 30px;    

    text-decoration: none;    

    text-indent: -9000px;    

    z-index: 20;    

    position: absolute;    

    padding: 0px;    

}  

.star-rating li a:hover{    

    background: url(/images/star_rating.gif) left center;    

    z-index: 2;    

    left: 0px;    

    border:none;    

}    

.star-rating a.one-star{    

    left: 0px;    

} 

.star-rating a.one-star:hover{    

    width:30px;    

} 

.star-rating a.two-stars{    

    left:30px;    

}  

.star-rating a.two-stars:hover{    

    width: 60px;    

}  

.star-rating a.three-stars{    

    left: 60px;    

}   

.star-rating a.three-stars:hover{    

    width: 90px;    

}  

.star-rating a.four-stars{    

    left: 90px;    

} 

.star-rating a.four-stars:hover{    

    width: 120px;    

} 

.star-rating a.five-stars{    

    left: 120px;    

} 

.star-rating a.five-stars:hover{    

    width: 150px;    

} 

.star-rating li.current-rating{    

    background: url(/images/star_rating.gif) left bottom;    

    position: absolute;    

    height: 30px;    

    display: block;    

    text-indent: -9000px;    

    z-index: 1;    

}  

Image for your CSS