Dynamic Fancybox forms in Rails

Can anyone point me towards some simple step by step guides that would help me to understand how to couple Fancybox and Ajax together?

I have three 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 a new event, and select Site or Operator from select boxes. I've also created a quick-add partials for Site and Operator. These are rendered in a div on the Event form, and displayed in Fancybox when a link is 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 so good.

Now I have two questions.

1- How to I hide the quick-add divs on the Event form, but display them in Fancybox. CSS classes such as display:none or visibility:hidden result in the partials not displaying in either location. Currently the partials are rendered at the end of the Event form as well as in the Fancybox popup, but this is not ideal.

2- How do I setup these quickadd partials so that they dynamically update the Event form. For example I'm adding a new Event for site Foobar. Foobar is not available in the select box so I click "add", enter Foobar in the popup form, click save, and Foobar is automatically set in the select box on the Event form.

I assume that question 2 will involve Ajax and calls for remote => true. However I'm very new to this and really need a basic step by step guide that would help me understand how to implement this. For example, do the "add" links need to be remote, or the partials? If the partials, how do I code that? After save, how do I开发者_JAVA百科 update and set the parent form select box?

Like I said, basic stuff, but having read several guides for Fancybox and other lightbox-like popups, and several guides for Ajax, I'm still having trouble tying the two together.

Thank you for any pointers.

---

1) If it isn't showing and hiding the divs correctly for you, then I would put them as display:none; in the css and use something like this for your fancybox call

$("#site").fancybox({
    onStart     :   function() {
        $('#DIV').show();
    },

    onClosed    :   function() {
                $('#DIV').hide();
    }
});

2) When I have a form like your describing, after you are done submitting the form (which I would submit using :remote => true on the form tag, you can have it check for ajaxComplete. and you can set some variables on your create.js.erb or update.js.erb files that will show and hide forms, set the current index, or you might have to reload your list after the ajaxCompleted is "completed"

Not sure if this helps or gives direction, but hope it will give some guidance..might be able to post more later today to help