Fear of Fish
Don't be afraid, I work at Engine Yard, not a sushi bar.
Simple AJAX and Inline Javascript with Rails
January 3rd, 2007
I've noticed a lot of people asking questions about ajax, rjs, scriptaculous and other whizzy cool effects lately. So I thought I'd document a couple here so there's less confusion about some of the simpler effects. I've included an element toggle on a hyper link, a simple div that updates with data from an action using link_to_remote, and others. Enjoy.
You'll learn effects like these: Video of ajax effects
Prepare
All of these examples assume you have included the default javascript files in your application.rhtml file:
<head>
<%= javascript_include_tag :defaults %>
</head>Toggle
The first of our simple effects is going to have to be the simple toggle (hide/show) of a div element. There is no remote call used in this, it simply uses javascript (generated by our ruby code) to show and hide a element of our choice.
<%= link_to_function "toggle with my div", "Element.toggle('to_toggle')" %>
<div id="to_toggle">
Now you see me, now you don't!
</div>Remote
Next we're going to fire an action from a link_to_remote and then update a list of items on the page, this involves multiple code pieces in different files, keep up.
<!-- app/views/words/index.rhtml -->
<ul id="sentence">
<li id="word_1">baby</li>
<li id="word_2">unzip</li>
<li id="word_3">my</li>
</ul>
<%= link_to_remote "WHAT?!?", :url => { :controller => 'words', :action => 'update' },
:loading => "Element.show('loading')" %>
<div id="loading" style="display:none;">Loading...</div>
<!-- app/controllers/words_controller -->
def update
@word = "laptop bag!"
return if request.xhr?
end<!-- app/views/words/update.rjs -->
# hide the loading text
page.hide 'loading'
# insert a new li into the element with an id of sentence
page.insert_html :bottom, 'sentence', "<li id='word_4'>#{@word}</li>"Notice how we use the same name for our rjs file as we did for the action we called, and then we ask the controller to return if the request was an xml http request (which is what ajax uses). This way if we want to do both rjs and standard requests with the update action we can.
I also demonstrated the use of a loading div here, but you could use a loading image as well, like a spinny circular thing or dots...or whatever takes your fancy.
Highlight
Let's modify the above example to highlight the new element when it arrives, this one's far too easy. Add this to the bottom of update.rjs:
page.visual_effect :highlight, 'word_4', :duration => 3Now when the element is added, you'll have your attention drawn to it. The duration can be left off because it's optional and defaults to 2 seconds, I just wanted to make you aware that it's there.
Blind
Again, modify our existing call and make it slide down instead of just appear, change the update.rjs to this:
# hide the loading text
page.hide 'loading'
# insert a new li into the element with an id of sentence
page.insert_html :bottom, 'sentence', "<li id='word_4' style='display:none;'>#{@word}</li>"
page.visual_effect :blind_down, 'word_4', :duration => 2We added to our li item a style of display, and set it to none. This is standard inline css markup, so when the item is added to our page it's hidden. Then we use the blind_down visual effect to slide it down with a duration of 2 seconds.
Simmer
I hope this helps all the ajax beginners get started with effects you can play with, be sure to check out the Rails api documentation for more scriptaculous effects.
Any questions boys and girls?
9 Responses to “Simple AJAX and Inline Javascript with Rails”
Leave a Reply
Jamie van Dyke
Jamie van Dyke has been a Rails developer since the beginning of 2005, working with some of the major players in the web market. He also played a large part in the documenting of Rails for the Caboose Documentation Project and teaches others on his blog and in training sessions around the world. Jamie is a core Rails contributor, and the publisher of multiple gems and plugins.
I'm a father of 2, living in a little village called Skipton which is in North Yorkshire, England. Anything else you'd like to know you can ask. Check out my photo and info at the caboose facebook or my flickr page.
Jamie is also unsure why he must write a Bio in third person, and doesn't really have a fear of fish, he just dislikes the taste and smell of them.
Search
Recommended Services
Recommended Books
Thank you. I was looking for a simple 'hello world' type example of the ajax libraries on rails and your's hit the nail on the head. Thank you for including a rjs example. Again, it's shows up in many places but nowhere as clearly as you offer here.
I've even thought to buy a book for dummy... untill now :) so thanks for that, your example really helps!
Hi! Good stuff. I found lots of intresting things here. I will be back!
Thanks, this post was easy to read thru and helped me out.
Thank you. Its amazing how many articles I had to sift through before I finally found one (yours) that clearly explains to the reader how to make use of this feature.
What's the best way to make an element hidden when the page loads, but toggle-able? I can't seem to find a rails-y way of doing it
This one is amazing article.
Wow, you should write your own book with this style!
I am trying to make this nice effect between two images. When I hover I would like the fist image to fade out and the second image to appear. Do I have to write a Java script for this or can I use the rails and ajax?