jQuery Repeater не работает в части, сгенерированной с помощью ajax

Question

В форме, состоящей из нескольких шагов, сгенерированных в ajax на одной странице, я должен использовать jquery.repeater на промежуточном этапе.

Код формы, специфичный для повторителя, находится в выделенном

Но jquery.repeater не работает, ничего не происходит, когда я нажимаю на кнопки добавления или удаления, даже без единого сообщения об ошибке javascript в консоли.

Это работает, если я использую эту часть непосредственно на странице без загрузки AJAX.

Обратите внимание, я использую метод частичных обновлений в моем методе обработчика ajax с

return [ '#myDiv' => $this->renderPartial('mypartial') ];

Добро пожаловать на помощь товарищам.

здесь код, который я использую

и сценарии объявления внизу моего макета

...
<!-- Scripts -->
<script src="{{ [
    'assets/javascript/jquery-3.2.1.min.js',
]|theme }}"></script>
{% framework extra %}
{% scripts %}
</body>
</html>

мой частичный

<form class="repeater">
    <!--
        The value given to the data-repeater-list attribute will be used as the
        base of rewritten name attributes.  In this example, the first
        data-repeater-item's name attribute would become group-a[0][text-input],
        and the second data-repeater-item would become group-a[1][text-input]
    -->
    <div data-repeater-list="group-a">

      <div data-repeater-item style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

    </div>

    <input data-repeater-create type="button" value="Add" />
</form>

моя страница

title = "Ajouter"
url = "/tableau-de-bord/espace/ajouter"
layout = "dashboard"
is_hidden = 0

[formulaireCreation]
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<div id='formulaire-creation-component-wrapper'>
    {% component 'formulaireCreation' %}
</div>

мой-repeater.js

$(document).ready(function () {
    $('.repeater').repeater({

        // (Optional)
        // "show" is called just after an item is added.  The item is hidden
        // at this point.  If a show callback is not given the item will
        // have $(this).show() called on it.
        show: function () {
            $(this).slideDown();
        },
        // (Optional)
        // "hide" is called when a user clicks on a data-repeater-delete
        // element.  The item is still visible.  "hide" is passed a function
        // as its first argument which will properly remove the item.
        // "hide" allows for a confirmation step, to send a delete request
        // to the server, etc.  If a hide callback is not given the item
        // will be deleted.
        hide: function (deleteElement) {
            if(confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        },
    })
});

И, наконец, для сравнения, код, который работает на базовой странице

title = "repeater-test"
url = "/repeater-test"
layout = "dashboard"
is_hidden = 0
==
function onStart()
{
    $this->addJs('assets/javascript/node_modules/jquery.repeater/jquery.repeater.min.js');
    $this->addJs('assets/javascript/my-repeater.js');
}
==
<form class="repeater">

    <div data-repeater-list="group-a">

      <div data-repeater-item style="display:none;">
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

      <div data-repeater-item>
        <input type="text" name="text-input" />
        <input data-repeater-delete type="button" value="Delete" />
      </div>

    </div>

    <input data-repeater-create type="button" value="Add" />

</form>

Answer 1

Работа с JqueryRepeater похожа на работу в аду. Визуально это фантастика, но кодирование чего-то другого, кроме базового, похоже на пинок в -gg- каждый раз!

Кажется, что jQuery плохо определяет новые поля каждой строки, но работа с чистым JavaScript возможна.

Например, чтобы изменить значение нового сгенерированного ввода...

Document. getElementsByName ( "your-data-repeater-list[1][field_name]")[0].Value =  "My new value";

Где [1] новый номер повторителя

Я потратил несколько дней (и ночей!) На работу с этим компонентом, и с некоторым терпением можно делать все, что вы захотите.

Повеселись!

Answer 2

Хорошо, я нашел решение, не очень элегантно, но оно работает

когда партиал с повторителем загружается в ajax, это как если бы страница забыла скрипт, объявленный с addJS на уровне страницы, поэтому я объявил скрипт с помощью <script src="/path/to/myscript.js"> в конце частичного непосредственно, и это работает

пытался внедрить скрипт с {% put scripts %} но не работает