Widget with Rails 3 August 2008

Widgets offer a simple and effective form of content distribution. Creating a JavaScript widget for your Rails app couldn't be easier. Here's how:

I'll create a demo app called 'leaf recipes', a resource for salad lovers, where people can share favourite salad recipes: 


$ rails salad
$ cd salad

Now for the recipe resource. My first iteration will be simple, all I want is a title and a description:

	
$ script/generate scaffold recipe title:string description:text
$ rake db:migrate

Now some content. I'll do this through the console:


$ script/console	
>> Recipe.create(:title => 'Crunchy Romaine Toss')
>> Recipe.create(:title => 'Roquefort Pear Salad')
>> Recipe.create(:title => 'Cranberry Spinach Salad')
>> exit

Fire up webrick and visit http://localhost:3000/recipe, which displays an index view, listing the three salads I just created.

I want my JavaScript widget to access my recipe resource with the same URL, but instead of returning HTML, I want it to spit out some JavaScript which the client browser can interpret. I need to visit the recipe controller:

app/controllers/recipes_controller.rb

I'm interested in the index method:


def index
@recipes = Recipe.find(:all)
respond_to do |format|
format.html # index.html.erb
format.xml  { render :xml => @recipes }
end
end

The respond_to block is ready to respond to requests for html and xml. My widget's going to want JavaScript. I'll add it to the block:


def index
@recipes = Recipe.find(:all)
respond_to do |format|
format.js # index.js.erb - this is where I'll craft my JavaScript
format.html # index.html.erb
format.xml  { render :xml => @recipes }
end
end

I'll create a corresponding view template:

app/views/recipes/index.js.erb


var txt = ''

txt += "<div id='salads_widget'>";
txt += "<h2>Fine green salads from salads.com</h2>";
txt += "<ul>";
<% for recipe in @recipes do %>
txt += "<li>";
txt += "<%= escape_javascript(link_to recipe.title, recipe_url(recipe)) %>";
txt += "</li>"
<% end %>
txt += "</ul>"
txt += "</div>"

document.write(txt);

Actual JavaScript code is minimal. Past txt += all we have is HTML markup with some erb template code for looping through the @recipes instance variable assigned in the recipes controller and displaying the title attribute within an HTML list. All of this is assigned to a JavaScript variable I've named txt which is eventually written to the client's web page with document.write(txt).

Our (very basic) JavaScript widget is ready for public consumption. Here's my 'copy and embed' snippet:

<script type="text/javascript" language="JavaScript" src="http://localhost:3000/recipes.js"></script>

It is clear to see from the URL that the recipe resource is being called. The .js at the end is for the repsond_to block, letting it know to reply with JavaScript.

AHOY THERE!

We're an Agile web development duo operating from a tiny dinghy currently moored off France. We build accessible, standards driven web solutions using the power of the Ruby on Rails web development framework and efficiency of agile processes... more»

RECENT PROJECTS

RECENT POSTS