ajax - Dynamic Fancybox forms in Rails -

can point me towards simple step step guides me understand how couple fancybox , ajax together?

i have 3 models:

class event     belongs_to :site     belongs_to :operator end  class site     has_many :events end  class operator    has_any :events end 

users can add new event, , select site or operator select boxes. i've created quick-add partials site , operator. these rendered in div on event form, , displayed in fancybox when link clicked.

<%= link_to_box "add", "#site" %> <%= link_to_box "add", "#operator" %>  <div id="site">     <%= render 'sites/quickadd' %> </div>  <div id="operator">     <%= render 'operators/quickadd' %> </div> 

so far good.

now have 2 questions.

1- how hide quick-add divs on event form, display them in fancybox. css classes such display:none or visibility:hidden result in partials not displaying in either location. partials rendered @ end of event form in fancybox popup, not ideal.

2- how setup these quickadd partials dynamically update event form. example i'm adding new event site foobar. foobar not available in select box click "add", enter foobar in popup form, click save, , foobar automatically set in select box on event form.

i assume question 2 involve ajax , calls remote => true. i'm new , need basic step step guide me understand how implement this. example, "add" links need remote, or partials? if partials, how code that? after save, how update , set parent form select box?

like said, basic stuff, having read several guides fancybox , other lightbox-like popups, , several guides ajax, i'm still having trouble tying 2 together.

thank pointers.

1) if isn't showing , hiding divs correctly you, put them display:none; in css , use fancybox call

$("#site").fancybox({     onstart     :   function() {         $('#div').show();     },      onclosed    :   function() {                 $('#div').hide();     } }); 

2) when have form describing, after done submitting form (which submit using :remote => true on form tag, can have check ajaxcomplete. , can set variables on create.js.erb or update.js.erb files show , hide forms, set current index, or might have reload list after ajaxcompleted "completed"

not sure if helps or gives direction, hope give guidance..might able post more later today help