jQuery-Facebox - Popup is not working after repaint from AJAX

Question

Hi

I am having a set of Links in my page and I have attached the facebox jQuery functionality so that whenever a link is pressed, it will get a nice popup

<a href="coach_selector_popup?day=<%= day %>&hour=<%= hour %>" rel="facebox">

Below is the script that I use for 'facebox'ing.

<script type="text/javascript">
  jQuery(document).ready(function($) {
    jQuery('a[rel*=facebox]').facebox()
  })
</script>

The above is working fine. But when I render it again on response to some AJAX call, the functionality is getting lost, meaning when I click on the link I am redirected to a page instead of a facebox popup.

I know that I need to do something when I repaint, can someone point me to the right direction?

Edit: I am doing a render partial on my controller like this.

render(:partial => "grid_item" , :locals => {:day=>d, :hour=>h)

Answer 1

you have to call .facebox() again after new elements are added... use a callback function on your ajax...

Answer 2

Include the javascript code you mentioned inside you partial. I am guessing it will be executed again when loading it. I am not sure if the document.ready event is triggered on a partial update, but i think it is.

Assuming you are using a link_to_remote or something similar, you could also use the :complete or :succes option to add your javascript callback, e.g. like this:

link_to_remote get_icon('remove'), 
   :url => {:action => "your_action", :id => @record},
   :success => "jQuery('a[rel*=facebox]').facebox();" , 
   :failure => "alert('It failed?')"

Hope it helps!