У меня есть форма, в которой пользователь может динамически добавлять дополнительные строки, используя jquery и элемент CakePHP для создания нескольких записей из одной формы.
Первое поле в каждом ряду является элементом выбора. Элемент управления select имеет класс и атрибут «selectpicker», чтобы сделать их доступными для поиска. Это работает на основе реализации bootstrap и плагина bootstrap-select, оба из которых (js и css) загружены в мой макет default.cpt. Это отлично работает.
Код для элемента управления select выглядит следующим образом:
<?= $this->Form->control("fruits.0.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, 'id' => 'fruit'.0, 'class'=>'selectpicker', 'data-live-search' => 'true']); ?>
В \src\Template\Element я создал Element Fruits.ctp с этой строкой формы. Я могу вызвать этот элемент напрямую, чтобы добавить дополнительную строку, и он отлично работает:
Однако я хочу, чтобы пользователь мог динамически добавлять строки формы по мере необходимости. Для этого я реализовал следующее:
- Нижний колонтитул таблицы содержит ссылку для добавления строки.
<tr>
<td></td>
<td></td>
<td class="actions">
<a href="#" class="add">Add Fruit</a>
</td>
</tr>
- Сразу после набора полей следующий скрипт:
<script id="fruit-template" type="text/x-underscore-template">
<?php echo $this->element('fruits');?>
</script>
- В конце страницы формы находится следующий скрипт:
<script>
$(document).ready(function() {
var
fruitTable = $('#fruit-table'),
fruitBody = fruitTable.find('tbody'),
fruitTemplate = _.template($('#fruit-template').remove().text()),
numberRows = fruitTable.find('tbody > tr').length;
fruitTable
//ADD AN ENTRY LINE
.on('click', 'a.add', function(e) {
e.preventDefault();
$(fruitTemplate({key: numberRows++}))
.hide()
.appendTo(fruitBody)
.fadeIn('fast');
})
//REMOVE A ENTRY LINE
.on('click', 'a.remove', function(e) {
e.preventDefault();
$(this)
.closest('tr')
.fadeOut('fast', function() {
});
});
if (numberRows === 0) {
fruitTable.find('a.add').click();
}
});
</script>
Эта установка хорошо работает с использованием шаблона элемента, подобного этому (Fruits.ctp):
<?php
$key = isset($key) ? $key : '<%= key %>';
?>
<tr>
<td>
<?= $this->Form->control("fruits.{$key}.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, "id" => "fruit{$key}", 'data-live-search' => 'true']); ?>
</td>
<td>
<?= $this->Form->control("fruits.{$key}.quantity", ['label'=>false]); ?>
</td>
<td class="actions">
<?php
if($key == 0) { echo '<a href="#" class="remove">Remove Fruit</a>'; }
?>
</td>
</tr>
Обратите внимание на шаблон, я НЕ определяю 'class'=>'selectpicker' в элементе управления select. Это работает и создает строку формы со «стандартным» элементом управления select (без форматирования и функции bootstrap-selectpicker):
Если в шаблоне я установил класс элемента управления в selectpicker:
<?= $this->Form->control("fruits.{$key}.fruit_id", ['options' => ['Apples','Oranges','Bananas', 'Tomatoes'], 'empty' => '-- Select Fruit --', 'label' => false, "id" => "fruit{$key}", 'class'=>'selectpicker', data-live-search' => 'true']); ?>
Затем строка добавляется, но элемент управления select исчезает:
Если я проверяю элемент пустой ячейки таблицы, где должен быть элемент управления select, я вижу там элемент управления, но он невидим и не имеет всех содержащихся в нем div-элементов, которые обычно есть в селекторе начальной загрузки.
Итак, мой вопрос, как я могу вызвать bootstrap-select (и другие bootstrap) js и css, чтобы они применялись к новому элементу, даже если страница уже загружена и элемент добавляется «inline»
Заранее спасибо за любые советы или рекомендации.
D.