RoR facebox for prototype

Question

Hi,

I've got facebox working using the following tags in my rails app

<%= link_to 'test' some_path, :rel => 'facebox' %>

Now that works perfect if the page is already loaded.

However, I have ajax updates on certain parts of the page which contain new links like the one shown above.

When you click the links from an ajax update facebox doesn't work follows on to the template.

I believe since the page doesn't refresh the source code is the same and :rel => 'facebox' doesn't work.

Does anyone have any advice on how I can get this to work without refreshing the page?

I've tried this in a method in a controller.

render :update do |page|
  page << "
    facebox.loading();
    facebox.reveal('text', null); 
    new Effect.Appear(facebox.facebox, {duration: .3});     
  "  
end

However, for some reason in chrome and IE the facebox appears for a brief second and then disappears.

Any advice? I've been banging my head off the wall all day.

Thank you

Answer 1

All you need to do, is ensure that you're making a javascript call to facebox somewhere in the view of your AJAX response: arguably the best location would be in the layout file. Just make sure that you include the following:

#app/views/layouts/ajax.html.erb
#...snip...

<% javascript_tag :defer => 'defer' do -%>
  jQuery(document).ready(function($) {
    $('a[rel*=facebox]').facebox();
  })
<% end -%>

or with prototype (untested):

#app/views/layouts/ajax.html.erb
#...snip...

<% javascript_tag :defer => 'defer' do -%>
  document.observe("dom:loaded", function() {
    $$('a[rel*="facebox"]').facebox();
  });
<% end -%>

This will ensure that any new links that appear on the page, as part your AJAX updates, will be handled by facebox.