Rails 3 Facebook Ajax picture

My rails 3 website shows a list of friends, and you can click on "next" to see the 10 next friends.
I'm using this :

    

Problem : I can load dynamically and see my next friends but not their  facebook profile pictures. Why?

Solution : In fact, you just need to "refresh" (re-parse) the element.
Do not use FBML because it will be deprecated soon.
Instead, use FB.XFBML.parse();

For example, in my action (who has been called by using :remote => true), it returns a ".js.erb" file.
In this .js.erb file, I append my friends, and at the end I just do FB.XFBML.parse(XX), where XX is the name of the section that I want to "refresh"/"re-parse".

and that's it !

rails 3 and jquery tabs

Recently, I'm working on a Ruby on rails website and I wanted to display some tabs.
Now, Rails 3 uses jquery, fine so let's search "jquery tabs" on Google, and I could find Jquery UI.
Oh and there is a "tab" widget. Perfect!
How to insert tabs in my website? Ok,  let's check on Google! I could find many websites saying that I should download the javascript files from the website and include them like that :
<%= javascript_include_tag "jquery_min.js ....
So I did it, but it didn't work...

Problem: how to use this widget ?

Solution : in fact, you don't need to download any javascript files! You just need a CSS file!
Here is more details:
Be sure to have : gem 'jquery-rails' in your Gemfile.
In application.js,  you need this :
//= require jquery
//= require jquery_ujs
(with these 2 lines above, you're importing Jquery, that's why you don't need to download any extra javascript files!)

Then, try to find a "jquery.ui.tabs.css". You can find it on the Jquery UI website.
Here is one ugly css for example (in case you can't find it):
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative;  top: 1px; margin: 0 .2em 1px 0; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { border: medium solid Orange;margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; border: medium solid Orange;}
.ui-tabs .ui-tabs-hide { display: none !important; }

In application.css.scss add this : @import "jquery.ui.tabs";

And now copy/paste the example code from Jquery UI Tabs page, and that's it !

Sorry, I should write more clearly with more details, but I don't have time now!