Как динамически добавить поля в форму на Rails?

Question

[Денис Лысенко]

Собственно, есть форма создания/редактирования сущности Page. Внутри этой формы нужно рендерить все существующие Blocks, которые привязаны к этой Page (Page has_many :blocks). Сам вопрос заключается вот в чем - как в стиле rails way сделать так, чтобы кнопка "Добавить блок" через AJAX рендерила новые поля блока (которые рендерятся для уже существующих блоков внутри fields_for).

<%= form_for([@page.site, @page]) do |f| %>

  <%= model_errors(@page) %>
    
  <div class="form-group">
    <%= f.label :slug, 'Адрес' %><br>
    <%= f.text_field :slug, class: 'form-control' %>
  </div>

  <h2 class="sub-header">Блоки</h2>
  <div id="pageBlocks" class="page-blocks">
    <%= f.fields_for :blocks do |ff| %>
      <div class="form-group">
        <%= ff.label :name, 'Название' %><br>
        <%= ff.text_field :name, class: 'form-control' %>
      </div>
      <div class="form-group">
        <%= ff.label :content, 'Содержание' %><br>
        <%= ff.text_area :content, class: 'form-control' %>
      </div>
    <% end %>

    <%= link_to 'Новый блок', "#", :class => 'btn btn-default', id: 'addBlock' %>
  </div>

  <%= f.submit class: 'btn btn-default' %>

<% end %>

Форма сейчас выглядит так:

<form accept-charset="UTF-8" action="/account/sites/1/pages/1" class="edit_page" id="edit_page_1" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="patch" /><input name="authenticity_token" type="hidden" value="/kqBgcHd+97ICZaE0YrwXDtX4/TzGaawetMUawJCsss=" /></div>

  <div class="form-group">
    <label for="page_slug">Адрес</label><br>
    <input class="form-control" id="page_slug" name="page[slug]" type="text" value="/" />
  </div>

  <h2 class="sub-header">Блоки</h2>
  <div id="pageBlocks" class="page-blocks">
    
      <div class="form-group">
        <label for="page_blocks_attributes_0_name">Название</label><br>
        <input class="form-control" id="page_blocks_attributes_0_name" name="page[blocks_attributes][0][name]" type="text" value="sections5" />
      </div>
      <div class="form-group">
        <label for="page_blocks_attributes_0_content">Содержание</label><br>
        <textarea class="form-control" id="page_blocks_attributes_0_content" name="page[blocks_attributes][0][content]"></textarea>
      </div>
      <input id="page_blocks_attributes_0_id" name="page[blocks_attributes][0][id]" type="hidden" value="1" />
    
      <a class="btn btn-default" href="#" id="addBlock">Новый блок</a>
  </div>

  <input class="btn btn-default" name="commit" type="submit" value="Сохранить" />

</form>

Answer 1

[Viktor Vsk]

Сам инпут в итоге просто должен иметь имя аналогичное тем, которые уже созданы (например, page[blocks][id]), если я вас правильно понял. И айди надо будет вычислить джаваскриптом в зависимости от того, сколько блоков на странице, а дальше скормить api.rubyonrails.org/classes/ActiveRecord/NestedAtt...

То есть, просто создастся 2 новых лейблы и 2 новых инпута, с name в том же виде, что и у уже созданного, но другим айди. Остальную работу выполнит nested_attributes

Comments

[Денис Лысенко]

Да, похоже так и придется делать, хотелось сделать как-то более элегантно, вынести эти два поля в отдельный partial _block.html.erb, при загрузке страницы рендерить его через render collection, ну и как-то подтягивать через новые через AJAX. А так получается дублирование кода.

[Viktor Vsk]

Вы создаете новую страницу (вводите ее описание). Страница все еще не существует. К странице привязаны блоки. Каким образом вы хотите создать блок к несуществующей странице аяксом? А если человек наклацал блоков, а потом передумал?

[Денис Лысенко]

Я хочу через AJAX рендерить только форму для создания блока, просто хотелось чтобы она генерировалась через хелперы, а не прописывать весь код в лоб. Через render collection рендерятся существующие блоки для экшена edit, для new естественно там будет пусто.

[Viktor Vsk]

хм, ну, если хотите лишнюю нагрузку на сервер вместо того. что бы рендерить все на клиенте: делайте экшен, который принимает айди (которое высчитывается от количества уже добавленных блоков) и отдает шаблон (инпут и лейбл) с этим айди и все это вставлялось через .js.erb

Но это очень много лишнего оверхеда, если, конечно, мы говорим об одном и том же.

Вот код, который я использовал для того, что бы при создании опроса добавлять к нему варианты ответа:

$('[data-addAnswer]').on('click', function( event ){
		event.preventDefault();
		var $newAnswer = $('<input>');
		var number = $('.ans').size();
		$newAnswer.val("Новый вопрос");
		$newAnswer.addClass("form-control ans");
		$newAnswer.attr('name', 'poll[answers_attributes][' + number + '][text]');
		$(this).before($newAnswer);
	});

И больше ничего не нужно. Основная "логика" в аттрибуте name, с остальным справится nested_attributes

[Денис Лысенко]

Да, похоже это лучший вариант сейчас. На самом деле я говорю о том, что если вдруг у меня изменится эта секция - то ее придется менять в двух местах, вместо одного. Мне очень нравится подход, который почерпнул из книги Agile Web Development with Rails, но он видимо годится только для метода show. Там, например, строка таблицы выносится в partial _product.html.erb, в итоге если мы рендерим страницу, мы ее рендерим через render @products, а если нужно подтянуть через AJAX - тот же самый шаблон без layout-а подтягивается через AJAX благодаря директиве respond_to, т.е. не нужно создавать дополнительные экшены.

[Viktor Vsk]

Тут нет смысла создавать экшн, так как необходимая логика (создать сущность, которой еще не существует, которая принадлежит к сущности, которой так же еще не существует, в случае, если операция будет в дальнейшем закончена, но может быть и будет прервана) - лучше всего подходит для процессинга на стороне клиента.

Там тоже есть возможность в переиспользовании кода, партиалах и т.д. и т.п., но для данной задачи это так же очень оверхед