Как AJAX-ом из PHP получить компонент «mdbootstrap select» так, чтобы он заработал?

Question

[Денис Щербина]

Динамически пытаюсь вывести из php компонент mdbootstrap select. Если приведённая ниже вёрстка загружается вместе со страницей, проблем не возникает, а если использую AJAX и через GET php подгружаю этот же код, он не работает. Проблема в том, что код не компилируется.. Подскажите пожалуйста способ получать такую конструкцию из PHP так, чтобы она работала:

<select class="mdb-select md-form" searchable="Search here..">
  <option value="" disabled selected>Choose your country</option>
  <option value="1">USA</option>
  <option value="2">Germany</option>
  <option value="3">France</option>
</select>
<button tipe="button" class="btn btn-default btn-sm">кнопка</button>

Answer 1

[Andrew]

Что у вас не работает?
https://jsfiddle.net/kickerock/mLdf0yhu/2/
Вам нужно преобразовать его в вид, как у меня в response, и в коллбэк удачного ответа от сервера - показать ваш response где-то

Comments

[Денис Щербина]

Попробовал Ваш метод, через js такая же картина: сам код подгружается, наблюдаю его в браузерном отладчике, в DOM, но по факту, вёрстка почему-то не отображается..

[Andrew]

Denis_maker, сомнительно. Стиль какой-то не заметили.

[Денис Щербина]

Andrew, Дело в том, что если вёрстка загружается вместе со страницей, она преобразуется вот в это:

<div class="select-wrapper mdb-select md-form">
<span class="caret">Ў</span>
<input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-1077e721-2657-48a3-9400-d2be89e4bfa8" value="">
<ul id="select-options-1077e721-2657-48a3-9400-d2be89e4bfa8" class="dropdown-content select-dropdown w-100" style="width: 237.547px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<span class="search-wrap ml-2">
<div class="md-form mt-0">
<input type="text" class="search w-100 d-block" tabindex="-1" placeholder="Search here..">
</div>
</span>
<li class="disabled   "><span class="filtrable"> Choose your country </span></li>
<li class=" optgroup-option  "><span class="filtrable"> USA   </span></li>
<li class=" optgroup-option  "><span class="filtrable"> Germany   </span></li>
<li class=" optgroup-option  "><span class="filtrable"> France   </span></li>

[Andrew]

Denis_maker, https://mdbootstrap.com/docs/jquery/forms/select/
Запустите
$('.mdb-select').materialSelect();
ваш селектор должен быть вместо .mdb-select
после вставки.

[Денис Щербина]

Andrew, Да! Это то что надо! Благодарю!) Вы решили мою проблему!)

Answer 2

[Денис Щербина]

Решение: Если из PHP вместе с вёрсткой передавать вот такой код инициализации, то компонент загружается как надо. Важно: mdb-select нужно менять на свой селектор, иначе при повторной подгрузке такого кода предыдущие компоненты будут инициализироваться повторно и ломаться.

$(document).ready(function() {
$('.mdb-select').materialSelect();
});

Comments

[Andrew]

первую и третью строку не нужно.