Блог

Кто-нибудь может указать мне на несколько простых пошаговых руководств, которые помогли бы мне понять, как соединить 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- Как скрыть элементы быстрого добавления в форме события, но отобразить их в Fancybox. Такие классы CSS, как display: none или visibility:hidden, приводят к тому, что части не отображаются ни в одном из местоположений. В настоящее время части отображаются в конце формы события, а также во всплывающем окне Fancybox, но это не идеально.

2- Как мне настроить эти части quickadd, чтобы они динамически обновляли форму события. Например, я добавляю новое событие для Foobar сайта. Foobar недоступен в поле выбора, поэтому я нажимаю «Добавить», ввожу Foobar во всплывающей форме, нажимаю сохранить, и Foobar автоматически устанавливается в поле выбора в форме события.

Я предполагаю, что вопрос 2 будет включать Ajax и вызовы для remote => true . Однако я очень новичок в этом, и мне действительно нужно базовое пошаговое руководство, которое помогло бы мне понять, как это реализовать. Например, ссылки «добавить» должны быть удаленными или частичными? Если частичные, как мне это закодировать? Как мне обновить и установить поле выбора родительской формы после сохранения?

Как я уже сказал, базовый материал, но, прочитав несколько руководств по Fancybox и другим всплывающим окнам, подобным лайтбоксам, и несколько руководств по Ajax, у меня все еще возникают проблемы с объединением двух.

Спасибо за любые указания.

1) Если он неправильно отображает и скрывает divs для вас, тогда я бы поместил их как display: none; в css и использовал что-то подобное для вашего вызова fancybox

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

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

2) Когда у меня будет форма, подобная описанной вами, после завершения отправки формы (которую я бы отправил, используя:remote => true в теге form), вы можете проверить ее на ajaxComplete. и вы можете установить некоторые переменные в своих файлах create.js.erb или update.js.erb, которые будут отображать и скрывать формы, задать текущий индекс, или вам, возможно, придется перезагрузить свой список после завершения ajaxCompleted

Не уверен, помогает ли это или дает направление, но надеюсь, что это даст некоторые рекомендации .. возможно, смогу опубликовать больше позже сегодня, чтобы помочь