Как реализовать встроенную кнопку «Добавить элемент» в Rails 3?

Question

Я не уверен, есть ли название для данного типа шаблона пользовательского интерфейса, но я хотел бы создать форму, которая выглядит следующим образом:

Company Name: _____
...

Employees:

   Name: _____  Title: _____
   Name: _____  Title: _____

   Add New Employee

Save Company

Я создаю или редактирую компанию, но в форму встроено произвольное количество «подформ» для сотрудников этой компании.Если я нажму кнопку «Добавить нового сотрудника», новая форма сотрудника должна появиться непосредственно перед кнопкой.

Я некоторое время отсутствовал в Rails и все еще пытаюсь понять, какв Rails 3 все делаетсясотрудников компании.

Но Rails 3, похоже, сильно изменил систему, которая делает эту работу, и это решение вообще не работает.

Какой рекомендуемый способ реализации этого шаблонав рельсах 3?

Answer 1

Remote_true должен быть установлен в части html_options параметров button_to: http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to.Таким образом, должны работать следующие фрагменты:

button_to "Add Employee",  {:action => :new_employee_form} , { :remote => true }

Редактировать:

Хорошо, как вы только что заявили, проблема в том, что новая форма не отправляется черезAjax.Причина этого в том, что вам нужно прикрепить обработчики событий к динамическим элементам с помощью функции ".on": http://api.jquery.com/on/

Answer 2

Посмотрите эти эпизоды бросков рельсов:

http://railscasts.com/episodes/196-nested-model-form-part-1

http://railscasts.com/episodes/197-nested-model-form-part-2

Я широко использую это в своих приложениях для рельсов.

Answer 3

Убедитесь, что вам нужны javascript-файлы ujs в application.js, и что вы включаете application.js в свой макет.

//= require jquery
//= require jquery_ujs
//= require jquery-ui

РЕДАКТИРОВАТЬ

Проверьте полученный HTML, он долженпохож на:

<%= button_to "Create", :action => "create", :remote => true %>
# => "<form method="post" action="/images/create" class="button_to" data-remote="true">
#      <div><input value="Create" type="submit" /></div>
#    </form>"

метод post, класс button_to, data-remote true.