DZone Snippets: ajax code

Rails ajax star rater

sporkyy (Todd Sayre) — Fri, 20 Jun 2008 04:19:32 GMT

Here's some Rails code I created to try out the CSS Star Rating Redux from Komodo Media.

I set up my routes.rb to use REST.

map.resources :titles, :member => { :rate => :any }

I use the Ruby Linguistics Framework to make this implementation easier. Install it using RubyGems (sudo gem install linguistics). And then put the following code at the top of your application_helper.rb file.

require 'linguistics'

Linguistics::use(:en)  # extends Array, String, and Numeric

This code goes in the page you want the rater to appear in, in this example, show.html.erb.

<%= render :partial => '/partials/star_rating', :locals => { :record => @title } %>

Create a partial called _star_rating.html.erb in your RAILS_ROOT/views/partials directory.

Currently <%= record.rating -%>/5 Stars.

<% (1..5).each do |i| -%>

    <%= link_to_remote pluralize(i, 'Star'), {

        :update => "#{dom_id(record)}_rating",

        :url => eval("rate_#{record.class.name.downcase}_url(:rating => #{i})")

    }, {

        :class => "#{i.en.numwords}-#{i.abs == 1 ? 'star' : 'stars'}",

        :title => "#{pluralize(i, 'star')} out of 5"

    } -%>

<% end -%>

FirstLast (real classes for Ajaxability)

sporkyy (Todd Sayre) — Sun, 24 Sep 2006 19:16:32 GMT

I know CSS has the :first-child and :last-child pseudo classes. But :first-child is a part of CSS 2 and has poor browsers support and :last-child is a part of CSS 3 and that's not worth thinking about using yet. The idea is sound though, so I worked up this JavaScript method of getting the same effect.

One advantage of doing this in JavaScript rather than using CSS is that the classes will change if you reorder the child nodes with more JavaScript. In my case I'm using Scriptaculous sortables. Or to be more specific, I'm using a Ruby on Rails helper method to make something sortable through Scriptaculous:

<%= sortable_element 'image-list',

    :constraint => false,

    :url => { :action => 'sort', :issue_id => params[:issue_id] }

-%>

I've chosen to not make this script run unobtrusively. Most of it can go into a file and be included in the header or added to your own common JavaScript include file. To get it to run on a page you will need to include something like the below in each page.

I use the DOMReady extension for Prototype's Event object, but you can use any loader you want. The Ajax.Responders.register part reruns the script after a drag-and-drop operation (or any Ajax operation really).

Download Scriptaculous and Prototype.

var FirstLast = {

    go: function(el) {

        el = $(el);



        // Whitespace nodes need to be cleaned to get the intended effect

        var children = Element.cleanWhitespace(el).childNodes;



        // Return if there are not any children

        if (0 == children.length) return

        

        if (1 == children.length) {

            // Cheap shortcut if there is only 1 child node

            children[0].addClassName(this._firstChildClassName);

            children[0].addClassName(this._lastChildClassName);

        } else {

            for (var i = 0; i < children.length; i++) {

                switch (i) {

                    // First child

                    case 0:

                        children[i].addClassName(this._firstChildClassName);

                        children[i].removeClassName(this._lastChildClassName);

                        break;

                    // Last child

                    case children.length - 1:

                        children[i].removeClassName(this._firstChildClassName);

                        children[i].addClassName(this._lastChildClassName);

                        break;

                    // Every child other than the first or last

                    default:

                        children[i].removeClassName(this._firstChildClassName);

                        children[i].removeClassName(this._lastChildClassName);

                        break;  // I know it is unnecessary

                }

            }

        }

    },

    // Pseudo Private methods and attributes

    _firstChildClassName: "first",

    _lastChildClassName: "last"

};

PrototypeHelper :with helper

sporkyy (Todd Sayre) — Sun, 18 Jun 2006 20:52:07 GMT

This method is for use in conjuction with the Ruby on Rails Module ActionView::Helpers::PrototypeHelper.

The options hash takes any number of key/value pairs the key becomes the name of the parameter passed in the with value and the value becomes a javascript expression

key — name of the parameter
value — a fragment of javascript that will be the value of the parameter

Example

>> params_for_with(:clean_range => 'clean_range', :raw_range => 'raw_range', :total_count => 'total_count')

=> 'total_count=' + total_count + '&' + 'clean_range=' + clean_range + '&' + 'raw_range=' + raw_range

Don‘t forget you won’t necessarily get the parameters out in the same order you put them in, such is the nature of hashes



def params_for_with(options = {})

    options.collect { |param_name, js_fragment| "'#{param_name}='+#{js_fragment}" }.join("+'&'+")

    # or this one

    #options.stringify_keys.collect { |param_name, js_fragment| '"' << param_name << '="+' << js_fragment }.join('+"&"+')

end