Полученный Fetch и вставленный innerHTML JS код не срабатывает. Как запустить полученный с сервера JS код?

Question

[Maксим Волков]

Создаю админ-панель интернет магазина на Laravel, в котором можно задать скидки как на товары так и на категории товаров.



При выборе условия, типа скидки в поле формы input select option срабатывает событие и отправляется Fetch запрос на сервер,

JS код

<div id="kindWrapper"> </div>
<script>
    const SelectChosen = document.getElementById('kind');
    function changeOption(){
        const SelectChosen = document.getElementById('kind');
        let kind = SelectChosen.options[SelectChosen.selectedIndex].value;
        let url = "{{route('discount.store.change_kind')}}";
        function onClick(){
            fetch(url, {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
                method: 'post',
                credentials: "same-origin",
                body: JSON.stringify({
                    kind: kind

                })
            }).then((response) => {
                return response.text();
            }).then((html) => {
                document.getElementById('kindWrapper').innerHTML = html;


            });
        }
        onClick();
    }
    SelectChosen.addEventListener("change", changeOption);
</script>

и в зависимости от выбранного типа отправляется HTML и JS код, который вставляется в HTML страницы.

spoiler

<label for="categories">Скидка на категории товаров</label>
<select
    class="form-control"
    name="categories[]"
    id="categories"
    multiple
>
</select>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if(document.getElementById('categories')){
            const choicesSelect = new Choices('#categories', {
                allowHTML: true,
                removeItemButton: true,
                placeholder: true,
                placeholderValue: 'Выберете категорию',
                choices: @json($categories),
            });
        }
    });
</script>

Полученный с сервера HTML и JS код встраивается как DOM элемент страницы успешно, однако вставленный innerHTML – JS код не срабатывает, не запускается.

Как запустить полученный с сервера JS код?

PS. Для поля формы input select используется плагин Choices.js, для запуска которого передается JS код в blade шаблоне Laravel.

Answer 1

[Сергей delphinpro]

Нужно пересмотреть логику работы.
Загружать и выполнять javascript с сервера – так себе идея.

Если вам нужно инициализировать какой-то js-плагин на загруженном html коде, то это лучше делать после выполнения запроса.
Тут разные пути есть.
1. Использовать какой-то микрофреймворк на фронте, который автоматически инициализируется на измененных или новых узлах DOM (например Alpine.js или Stimulus) и в его хуках жизненного цикла инитить плагин.
2. Выполнять все запросы через какую-то свою обертку над fetch, и по всем запросам отрабатывать инициализацию всех используемых плагинов.
3. В ответе сервера передавать дополнительную информацию о том, какой плагин и на каком новом элементе необходимо инициализировать.

Comments

[Сергей delphinpro]

грубо говоря как-то так:

fetch(...)
    .then(res => {
         document.querySelectorAll('.notInitedSelect').forEach(s => {
            new Choices(e);
         });
    })

[Maксим Волков]

Благодарю за развернутый ответ.
Предполагал, что лучшим решение будет использовать какой-либо JS фреймворк , но была надежда на более простое решение.
Буду разбираться с Alpine.js, давно пора.

[Aetae]

Maксим Волков, более простое решение - jquery, он из коробки при .html() исполняет и скрипты.
Можете посмотреть в коде функции как он это делает(просто пересоздаёт каждый script руками).

Но это какашка, не надо так делать.:)