Rails 中的动态 Fancybox 表单

Question

谁能向我指出一些简单的分步指南，帮助我了解如何将 Fancybox 和 Ajax 结合在一起？

我有三个模型：

Class Event
    belongs_to :site
    belongs_to :operator
End

Class Site
    has_many :events
End

Class Operator
   has_any :events
End

用户可以添加新事件，然后从选择框中选择站点或操作员。我还为站点和操作员创建了快速添加部分。它们呈现在“事件”表单上的 div 中，并在单击链接时显示在 Fancybox 中。

<%= link_to_box "Add", "#site" %>
<%= link_to_box "Add", "#operator" %>

<div id="site">
    <%= render 'sites/quickadd' %>
</div>

<div id="operator">
    <%= render 'operators/quickadd' %>
</div>

到目前为止，一切都很好。

现在我有两个问题。

1-如何隐藏事件表单上的快速添加 div，但在 Fancybox 中显示它们。 CSS 类（例如 display:none 或visibility:hidden）会导致部分内容不显示在任一位置。目前，部分内容在事件表单的末尾以及 Fancybox 弹出窗口中呈现，但这并不理想。

2-如何设置这些快速添加部分，以便它们动态更新事件表单。例如，我正在为网站 Foobar 添加一个新事件。 Foobar 在选择框中不可用，因此我单击“添加”，在弹出表单中输入 Foobar，单击保存，Foobar 会自动设置在“事件”表单上的选择框中。

我假设问题 2 将涉及 Ajax 并调用 remote =>;正确。然而，我对此非常陌生，确实需要一个基本的分步指南来帮助我了解如何实现这一点。例如，“添加”链接是否需要是远程链接，还是部分链接？如果是部分内容，我该如何编码？保存后，如何更新和设置父表单选择框？

就像我说的，基本的东西，但是在阅读了 Fancybox 和其他类似灯箱的弹出窗口的几份指南以及 Ajax 的几份指南后，我仍然无法将两者联系在一起。

感谢您的指点。

Answer 1

1）如果它没有正确显示和隐藏div，那么我会将它们设置为display：none;在 css 中并在您的 fancybox 调用中使用类似的内容

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

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

2）当我有一个像您所描述的表单时，在您完成提交表单（我将在表单标记上使用 :remote => true 提交该表单）时，您可以它会检查 ajaxComplete，并且您可以在 create.js.erb 或 update.js.erb 文件上设置一些变量，这些变量将显示和隐藏表单、设置当前索引，或者您可能必须在 ajaxCompleted 为“后重新加载列表”已完成”

不确定这是否有帮助或提供方向，但希望它能提供一些指导..今天晚些时候可能会发布更多内容来提供帮助