Как заставить корректно работать jquery.formstyler и bootstrap popover?

259

14 января 2019, 07:50

День добрый! Стоит задача применить плагин jquery.formstyler к select'у, который находится в html контенте, загружаемом в popover.

Проблема в том, что если просто навешивать styler на select, то в popover он будет не активен (стили применяются, но нельзя раскрыть выпадающий список dropdown). Поэтому я повесил styler на событие inserted.bs.popover и это сработало, но только один раз. Если закрыть всплывающее окно и открыть его снова, select вновь нельзя будет раскрыть.

Скорее всего проблема в том, что у меня есть подготовленных html-код, который потом дублируется в popover'e но я не могу генерировать его на лету в content, поскольку данные в select подгружаются из БД.

$('#call').popover({ 
  html: true, 
  content: function() { 
    return $("#recall-info-content").html(); 
  }, 
  placement: 'bottom' 
}); 
 
$("#call").on('inserted.bs.popover', function() { 
  $('div.recall-info-body select').styler(); 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQueryFormStyler/1.5.5/jquery.formstyler.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQueryFormStyler/1.5.5/jquery.formstyler.css" rel="stylesheet" /> 
 
<a href="#" id="call">перезвонить</a> 
 
<div id="recall-info-content" style="display: none"> 
  <div class="row recall-info-body"> 
    <div class="col-sm-12 col-md-12 col-lg-12"> 
      <form id="call_form"> 
        <select> 
          <option value="0" class='hidecallform'>Выберите тему</option> 
          <option value="1">Тема 1</option> 
          <option value="1">Тема 1</option> 
        </select> 
      </form> 
    </div> 
  </div> 
</div>

UPD: Да, если генерировать контент на лету, то все работает, но нет возможности подгрузить данные из php.

$('#call').popover({
  html: true,
  content: function() {
    return '<select><option value="0">Выбрать тему</option><option>Тема 1</option></select>';
  },
  placement: 'bottom'
});
  $("#call").on('inserted.bs.popover', function () {
    $('select').styler();
  });

UPD2: В принципе, решил проблему. Просто запихнул js код с popover и styler в php файл.

    <script>
    $(document).ready(function() {
    $('#call').popover({ html: true, content: function() { return '<select><option value="0">Выбрать тему</option><option><?=$theme1?></option></select>'; }, placement: 'bottom' }); 
$("#call").on('inserted.bs.popover', function () { $('select').styler(); });
    });
    </script>