Rubynoob

Thanks once again for inspiration to Brian Eng of Softies on Rails, here's my latest tutorial. Brian mentioned how easy it would be to add script.aculo.us effects to my little delicious app. And he was totally correct. What are script.aculo.us effects, you ask? Go check out this page. Click on each of the little demo boxes and watch the magic. Now say, "Holy crap! That's cool!" Then come back and I'll tell you how to add any of that to your Ruby on Rails app.

Here we go. script.aculo.us depends on the prototype javascript library which comes with the latest version of Rails. So, we just need to get script.aculo.us into our app. First download and unzip the latest script.aculo.us code. Open the src folder and grab the files which do not exist in your rails app's public/javascripts directory. Copy these files over to this directory. Add this line between the 'head' tags in your layout.rhtml file:

1 2	<%= javascript_include_tag "scriptaculous" %>

Now you have the power of script.aculo.us in your rails app! NOTE: I just saw on the script.aculo.us home page that it is supposed to be bundled with RoR. I didn't notice in my directory, but this step may not be necessary for you.

Remember in my last tutorial when I added in the spinner effect, I used the :loading and :completed callbacks? Like this:

1 2 3 4 5 6 7

<%= link_to_remote("Get Results", :update => 'query_results', :with => "'tags=' + $F('query_tags')", :loading => "Element.show('getting_results')", :complete => "Element.hide('getting_results')", :url => { :action => :get_results }) %>

We can use this same framework to add in cool scriptaculous effects. Let's say that for whatever reason we want the 'query_results' text area to fade away while we're getting the results and then fade in when the results are available. Easy!

Use code like this to make an element slowly fade away:

new Effect.Fade('div_or_span_id_here')

So, I created a span around my query_results text area like this:

1 2	<span id="results" ><%= text_area 'query', 'results' %></span>

At this point I ran into a conundrum. I didn't want to get rid of the callbacks that show and hide the spinning graphic, so how do I add additional effects to the same callback? Again, it's easy. Since the link_to_remote method spits out javascript and since each callback represents a complete javascript function, just seperate each method you want called with semi-colons. So, I modified the code above like this:

1 2 3 4 5 6 7

<%= link_to_remote("Get Results", :update => 'query_results', :with => "'tags=' + $F('query_tags')", :loading => "new Effect.Appear('comment_loading'); new Effect.Fade('results')", :complete => "Element.hide('comment_loading'); new Effect.Appear('results')", :url => { :action => :get_results }) %>

Here you can see that both the :loading and :complete callbacks do two different things. On the page, if you browse the source, you'll see the loading callback looks like this:

1 2 3 4 5 6

function(request) { Element.hide('comment_loading'); new Effect.Appear('results') }

I think you can just keep stringing more and more effects here if you'd like, though I'd guess a better way to go if you're adding a ton of effects is to create your own javascript file and reference a method in that.

One more thing, it ought to be obvious, but maybe not, that you can add any of the effects listed on the demos page (linked above) by just using their name. Slidedown, Grow, etc. Some of these methods have optional parameters that you can use to control the duration of the effects. Just check the docs, or check out this awesome cheatsheet(PDF) I just found.

To see some script.aculo.us action, add a comment to this post. When you submit the comment, it will get added to the list of previous comments using the SlideDown effect, so it appears as if it has slid out of nowhere right onto the end of the list. Cool stuff!

Hopefully someone out there has found this little tutorial useful. If you notice something horrible in my code or if you have a much better way of doing things, or if you just want to say hi, please leave me a comment below. Thanks!

UPDATE: I just added a videodemo of my del.icio.us application showing both the ajax progress indicator as well as some scriptaculous effects. Check it out!