如何在动态添加的 CakePHP 元素中包含默认的 js 和 css 脚本？

Question

我有一个表单，用户可以使用 jquery 和 CakePHP 元素动态添加额外的行，以从单个表单创建多个记录。

每行的第一个字段是一个选择控件。选择控件具有“selectpicker”类和属性以使选择选项可搜索。这基于 bootstrap 和“bootstrap-select”插件的实现，这两个插件（js 和 css）都加载到我的 default.cpt 布局中。这非常有效。

选择控件的代码如下所示：

    <?= $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。我可以直接调用这个元素来添加一个额外的行，它工作得很好：

但是，我希望用户能够根据需要动态添加表单行。为了实现这一点，我实现了以下内容：

1. 表格页脚有一个添加行的链接。

                <tr>
                    <td></td>
                    <td></td>
                    <td class="actions">
                        <a href="#" class="add">Add Fruit</a>
                    </td>
                </tr>

1. 字段集之后是这个脚本：

    <script id="fruit-template" type="text/x-underscore-template">
        <?php echo $this->element('fruits');?>
    </script>

1. 在表单页面的末尾是这个脚本：

<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'。这可以工作并生成带有“标准”选择控件的表单行（没有引导选择器格式和功能）：

如果在模板中我将选择控件类设置为 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']); ?>

然后添加了行，但是选择控件消失了：

如果我检查应该选择控件的空表格单元格的元素，我可以在那里看到该控件，但它是不可见的，并且没有引导选择选择器通常具有的所有包含 div。

所以我的问题是，如何调用 bootstrap-select（和其他引导程序）js 和 css 以便将其应用于新元素，即使页面已经加载并且元素正在“内联”添加?

提前感谢您提供任何建议或指导。 D.

Answer 1

事实证明，解决方案比我想象的要简单得多。

在我的脚本中添加带有选择控件的新元素，我可以在点击链接中调用 bootstrap-select：

        $('select').selectpicker({
        liveSearch: true
        });

就是这样。

它仍然没有真正回答我的问题，但这个上下文中的问题现在已经解决了。如果需要，我将重新构建我的问题并使用 jquery 标签发布。