awkward silence

This is cool. Just when you think those Rails guys are about out of tricks, they pull this out of their hat.

If you’ve used the groovy AJAX tools in Rails much, you’ve probably hit the point where you have to update two elements on a screen. It gets ugly pretty quick, with calls to “evaluateremoteresponse” and “updateelementfunction” (as best I recall) and it really gets to be unclear what is doing what to whom and when.

RJS to the Rescue!

Here’s a little addition/clarification to the demo that Cody posted.

In a controller, add these:

def fox
  @header = "A Nice List of Animals"
end

def add
  @new_item = params[:arg]
  @header = "All Your List Are Belong To Us!"
end

def remove
end

Your fox.rhtml would look something like:

<h1 id='header'><%= @header %></h1>
<ul id='list'>
  <li id='dog'>Dog</li>
  <li id='cat'>Cat</li>
  <li id='mouse'>Mouse</li>
</ul>
<div><%= link_to_remote("Add a Fox!",
      :url =>{ :action => :add, :arg => "Fox" }) %></div>
<div><%= link_to_remote("Nuke the Cat!",
      :url =>{ :action => :remove }) %></div>

Your add.rjs goes in your views directory next to the other views for that controller:

page.insert_html :bottom, 'list', content_tag("li", @new_item)
page.visual_effect :highlight, 'list', :duration => 3
page.replace_html 'header', @header

And also toss in a remove.rjs for fun:

page.visual_effect :shrink, 'cat', :duration => 1

And Voila! This is still a simple example, but you can see that it will sure help clean up Ajax-driven pages a whole lot.