Я использую jQuery для добавления и удаления строк таблицы для набора форм внутри другой формы в Symfony 4. Это было непросто, но в итоге заставило его работать.С помощью макроса в Twig я могу получить результат рендеринга:
<table>
<div id="document-list" data-prototype="
<tr>
<td>
<fieldset class="form-group">
<div id="program_programDocument___name__" novalidate="novalidate">
<div class="form-group"><input type="text" id="program_programDocument___name___name" name="program[programDocument][__name__][name]" required="required" class="form-control"/>
</div>
</div>
</fieldset>
</td>
<td>
<button type="button"class="remove-collection-widget"data-list="#remove-collection-widget">Remove</button>
</td>
</tr>" data-widget-tags="<div></div>">
</div>
</table>
<button type="button" class="add-another-collection-widget" data-list="#document-list">Add document</button>
Я максимально очистил этот код, чтобы сделать его читаемым.Весь HTML внутри data-prototype="...." такой, каким он должен быть.Мой код работает (ish) вместе с некоторым jQuery:
jQuery('.add-another-collection-widget').click(function(e) {
var list = jQuery(jQuery(this).attr('data-list'));
// Try to find the counter of the list or use the length of the list
var counter = list.data('widget-counter') | list.children().length;
// grab the prototype template
var newWidget = list.attr('data-prototype');
// replace the "__name__" used in the id and name of the prototype
// with a number that's unique to your emails
// end name attribute looks like name="contact[emails][2]"
newWidget = newWidget.replace(/__name__/g, counter);
// Increase the counter
counter++;
// And store it, the length cannot be used if deleting widgets is allowed
list.data('widget-counter', counter);
// create a new list element and add it to the list
var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
newElem.appendTo(list);
});
$(function() {
$(document).on("click", ".remove-collection-widget", function() {
$(this).closest("tr").remove();
});
});
Проблема в том, что результат при добавлении большего количества строк формы заключается в том, что они фактически не попадают в таблицу.Вы можете сами убедиться ( JSFiddle ), что результат выглядит хорошо, но на самом деле это не так.
Я почти уверен, что это связано с моим jQuery, но я застрял сейчас и надеюсь, что некоторые из вас могут указать, что не так.