Почему в AJAX ответе не работают JS скрипты?

Question

[nevesomostjke]

Всем привет!
Может кто подскажет, у меня такая проблема.
Я делаю страницу с выбором категорий. Я хочу чтобы она была на Ajax.
Замысел такой, есть select с выбором, где есть список всех марок машин. Пользователь выбирает марку и у него появляется новый select со списком моделей, на этой же странице. Т.е. отправляется POST на контроллер и контроллер возвращает представление с другим списком.
В категориях много очень моделей и разом загрузить все категории на страницу не получится.

Все вроде ничего, ответ приходит, но вся моя проблема заключается в том, что я использую JS плагин select 2, и когда пользователю возвращается представление с новым выпадающим списком отключаются JS скрипты (т.е. новый выпадающий список не работает). Я пробовал 100500 способов, у меня ничего не выходит.

Я перепробовал за день 100500 способов, https://qna.habr.com/q/63544 - это мне не помогло.
Может кто подскажет, в какую сторону смотреть, где есть конкретно рабочий образец, такой чтобы в возвращаемом представлении работали JS скрипты? Может, правильно будет реализовать это на JSON? Если на JSON, я в нем очень слаб, дайте образец.
Laravel 8.

/// upd
Решил инициализацией select 2 в ответе ajax

function sendform(form, way, status)  { 
    var msg   = jQuery(form).serialize(); // ID формы
      
        jQuery.ajax({    
        method: 'POST', // Метод отправки
        url: way, // Адрес обработчика
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend: function(){
        jQuery(status).html('Отправляю...'); // Промежуточный статус
        },
        data: msg,
        cache: false,  
        success: function(html){  
          $(function(){
                $('select').select2();
              });
        jQuery(status).html(html);  }  });  // Вывод ответа

  }

Comments

[lUser L]

Что бы скрипты работали для динамически добавленных элементов нужно использовать делегирование. Ответ в предыдущем вопросе об этом. Почитайте об этом, в гугле достаточно инфы.

Например в jquery можете обращаться к элементу от body или document :

$('body').on('click', '.your_elements', function(){
   // тут код
});

или

$(document).on('click', '.your_elements', function(){
   // тут код
});

Но что бы ответить на ваш вопрос более точно, нужно его детальней описать. Мало данных, кода нет.

[irishmann]

Код свой покажи

[nevesomostjke]

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

script>
									function sendform()  { 
										var msg   = jQuery('#myform').serialize(); // ID формы
										jQuery.ajax({    
										method: 'POST', // Метод отправки
										url: 'catalog/ajax', // Адрес обработчика
										headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
										beforeSend: function(){
											jQuery('#status').html('Отправляю...'); // Промежуточный статус
										},
										data: msg,
										cache: false,  
										success: function(html){  

										jQuery('#status').html(html);  }  });  // Вывод ответа

										
									} 						
								</script>

                                <div class="row">
								<div class="form-group">
									<form method="POST" id="myform" action="javascript:void(null);" onsubmit="sendform()">
									{!! csrf_field() !!}
									<div class="form-group">
										<label>Select with search</label>
										<select class="form-control select-search" data-fouc>
											<optgroup label="Mountain Time Zone">
												<option value="AZ">Arizona</option>
												<option value="CO">Colorado</option>
												<option value="ID">Idaho</option>
												<option value="WY">Wyoming</option>
											</optgroup>
											<optgroup label="Central Time Zone">
												<option value="AL">Alabama</option>
												<option value="IA">Iowa</option>
												<option value="KS">Kansas</option>
												<option value="KY">Kentucky</option>
											</optgroup>
										</select>
									</div>

										<input type="submit" value="Отправить">      
										<div id="status"></div>
									</form>
								</div>
							</div>

public function ajax()
    {
        return view('catalog.catalog'); 
    }

[nevesomostjke]

irishmann, показал

[nevesomostjke]

Эмиль 🔥, что вставить в your_elements?

[Евгений]

Где код, который select 2 инициализирует?

Answer 1

[Timur Maslov]

Сервер должен отдавать ответ в формате json и потом эти данные прокидывай в select2 через js код.
Пример см в доке

Comments

[nevesomostjke]

Я не понимаю, куда это вставить

function sendform(form, way, status)  { 
    var msg   = jQuery(form).serialize(); // ID формы
      
        jQuery.ajax({    
        method: 'POST', // Метод отправки
        url: way, // Адрес обработчика
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend: function(){
        jQuery(status).html('Отправляю...'); // Промежуточный статус
        },
        data: msg,
        cache: false,  
        success: function(html){  

        jQuery(status).html(html);  }  });  // Вывод ответа

  }