CODEWITHSUNDEEP
jqueryajaxselectbootstrap-select
user3774771
user3774771

Reputation: 53

Bootstrap select hide on click after init

I have an AJAX function:

$.ajax({
  type: 'POST',
  url: '../funcs/factorypreorder.php',
  data: {
    newPreorderPartnumber: newPreorderPartnumber,
    newPreorderCompany: newPreorderCompany,
    newPreorderSearch: true
  },
  beforeSend: function(data){
  success: function(data) {
    data = $.parseJSON(data);
    if(data['exist'] == true) {
      $('.popup_mod .result_block').append(data['message']);
      $('<div class="user_block">'+data['users']+'</div>').insertAfter($('.popup_mod .result_block'));
      $('.user_block .selectpicker').selectpicker({
        style: 'btn-info',
        size: 4
      });
    }
  },
  complete: function(data){},
  error:  function(xhr, str){}
});

The response appended to .user_block, have the select with options. It init with bootstrap selectpicker. It's successfully init.

But when I click by select block, it is hiding (adding display: none to block btn-group bootstrap-select) and hide all the select block.

This is the "select block":

<div class="btn-group bootstrap-select" style="display: none;">
  <button type="button" class="btn dropdown-toggle btn-info" data-toggle="dropdown" role="button" data-id="userlist" title="Новый пользователь" aria-expanded="false">
    <span class="filter-option pull-left">Новый пользователь</span>&nbsp;
    <span class="bs-caret">
      <span class="caret"></span>
    </span>
  </button>
  <div class="dropdown-menu open" role="combobox" style="max-height: 172px; overflow: hidden;">
    <div class="bs-searchbox">
      <input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search" />
    </div>
    <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 104px; overflow-y: auto;">
      <li data-original-index="0" class="selected active">
        <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true">
          <span class="text">New user</span>
          <span class="glyphicon glyphicon-ok check-mark"></span>
        </a>
      </li>
      <li data-original-index="1">
        <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
          <span class="text">MS Auto</span>
          <span class="glyphicon glyphicon-ok check-mark"></span>
        </a>
      </li>
    </ul>
  </div>
  <select id="userlist" name="userlist" class="selectpicker" data-live-search="true" tabindex="-98" style="display: none;">
    <option value="0">New user</option>
    <option value="302">MS Auto</option>
  </select>
</div>

Upvotes: 0

Views: 812

Answers (1)

user3774771
user3774771

Reputation: 53

I'm include 2 bootstrap main libraries (1 of it included by CMS). Because of this I have a conflict.

Upvotes: 1

Related Questions