Выбранный плагин jQuery QueryBuilder не работает на вкладках начальной загрузки - PullRequest
Новая
       11

Выбранный плагин jQuery QueryBuilder не работает на вкладках начальной загрузки

0 голосов
/ 02 декабря 2018

Я успешно реализовал построитель запросов jQuery с выбранным плагином, однако я хочу поместить его на вкладку начальной загрузки, и это приводит к поломке дисплея.

У меня есть только базовый JavaScript-код, который можетв этом JsFiddle будет работать, как и ожидалось: https://jsfiddle.net/xL0748ua/

$('#builder-widgets').queryBuilder({
  plugins: ['chosen-selectpicker'],
  filters: [
    {
      id: 'australia',
      label: 'Australia',
      type: 'string',
    },
    {
      id: 'united-kingdom',
      label: 'United Kingdom',
      type: 'string',
    },
    {
      id: 'japan',
      label: 'Japan',
      type: 'string',
    },
    {
      id: 'new-zealand',
      label: 'New Zealand',
      type: 'string',
    },
    {
      id: 'canada',
      label: 'Canada',
      type: 'string',
    }
  ]
})

Однако в этом разветвленном JsFiddle я поместил селектор #builder-widgets во вкладки, и экран не работает.

https://jsfiddle.net/pq52sfoe/

<div class="row">
  <div class="col-sm-9">
    <ul class="nav nav-tabs">
      <li>
        <a href="#tab-1" role="tab" data-toggle="tab" class="active">Tab 1 with query builder</a>
      </li>
      <li>
        <a href="#tab-2" role="tab" data-toggle="tab">Tab 2</a>
      </li>
      <li>
        <a href="#tab-3" role="tab" data-toggle="tab">Tab 3</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade" id="tab-1">
        <div class="row">
          <div class="col-sm-12">
            <div id="builder-widgets"></div>
          </div>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="tab-2">
      </div>

      <div role="tabpanel" class="tab-pane fade" id="tab-3">
      </div>

    </div>
  </div>
</div>

Отображение с выбранным плагином QueryBuilder на вкладках начальной загрузки: Display with QueryBuilder chosen-plugin in bootstrap tabs

Существуют ли другие параметры конфигурации, необходимые дляпозволить этому работать?Или, возможно, ошибка в самом Query Builder?

...