Конфликт пользовательского интерфейса Jquery и кнопки Bootstrap

У меня проблема с группами кнопок для начальной загрузки.

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

Если я переключу порядок, то появится кнопка закрытия диалогового окна jquery ui, но все группы кнопок для начальной загрузки перепутались из-за конфликта между двумя библиотеками js.

Я попытался использовать решение для начальной загрузки:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Затем при вызове $(".btn").bootstrapBtn() и тестировании группы кнопок каждый раз, когда я нажимаю новую кнопку в группе, я получаю сообщение об ошибке:

cannot call methods on button prior to initialization; attempted to call method 'toggle'

Я провел массу исследований и до сих пор не могу найти решение.

Вот мой код:

<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
    </label>
    <label class="btn btn-default">
        <input class="pieChart" data-target="pie-section"  type="radio" name="options" id="pie"> Pie
    </label>        
    <label class="btn btn-default">
        <input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
    </label>
</div>


 <div class="bar-section k-content">
     <div class="chart" id="barChart"></div>
 </div>

 <div class="container-fluid pie-section k-content">
     <div class="row chart" id="pie-section"></div>
 </div>

 <div class="column-section k-content">
     <div class="chart" id="columnChart"></div>
 </div>

And my JS to handle the buttons:

 $('.btn').button();

 $('input[type=radio]').on('change', function () {
    var target = "#" + $(this).data("target");
    $(".chart").not(target).hide();
    $(target).show();
    kendo.resize($(".k-content"));
 });

PS: использование Jquery UI версии 1.11.1 и Jquery версии 1.11.1


button twitter-bootstrap-3 jquery-ui buttongroup
person TheNameHobbs    schedule 03.10.2014    source источник
comment
Есть ли причина, по которой вы не просто используете модальное окно Bootstrap?   -  person jme11    schedule 03.10.2014
comment
Да, прямо сейчас нам нужно поддерживать диалоги, пока мы не сможем обновить их все до модальных окон.   -  person TheNameHobbs    schedule 03.10.2014
comment
Пожалуйста, опубликуйте JS Bin или JS Fiddle вашего примера.   -  person cvrebert    schedule 06.10.2014

Ответы (3)


arrow_upward
14
arrow_downward

Если вы просто загуглите это сообщение об ошибке, вы увидите, что это сообщение об ошибке пользовательского интерфейса jQuery, поэтому $.fn.button в этом месте вашего кода имеется в виду подключаемый модуль кнопки пользовательского интерфейса jQuery, а не подключаемый модуль кнопки Bootstrap.

Вам нужно поставить noConflict после загрузки Bootstrap, но до загрузки пользовательского интерфейса jQuery, например:

<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
  $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>

Затем вам нужно будет использовать $(...).bootstrapBtn(...) вместо $(...).button(...) в остальной части вашего кода.

person cvrebert    schedule 03.10.2014
comment
Вы можете думать, что это работает, но это не так. Для Bootstrap требуется jQuery, поэтому исходный код сценария jQuery должен быть загружен перед исходным кодом сценария Bootsrap. Если вы сделаете это наоборот, ваш пользовательский интерфейс jQuery будет работать, но ваши вещи Bootstrap не будут. - person WernerVA; 08.02.2015
comment
@WernerVA Я думаю, вы путаете jQuery и пользовательский интерфейс jQuery. - person cvrebert; 09.02.2015
comment
Вы также должны отметить, что после этого вам нужно вызвать функциональность кнопки с помощью .bootstrapBtn() вместо .button(). - person Gravity Grave; 29.05.2015

arrow_upward
2
arrow_downward

Если вы используете gulp или Grunt для создания своих ресурсов (например, с файлами main-bower), можно не включать весь jQueryUI. Просто возьмите нужные детали и пропустите кнопки и всплывающую подсказку. По моему опыту, именно эти два противоречат друг другу больше всего.

Например, поместите следующий раздел в ваш bower.json:

"overrides":
    "jqueryui": {
        "main": [
            "ui/core.js",
            "ui/widget.js",
            "ui/mouse.js",
            "ui/datepicker.js",
            "ui/draggable.js",
            "ui/droppable.js",
            "ui/resizable.js",
            "ui/selectable.js"
        ]
    }

Использование только тех частей, которые вам нужны, также является хорошей практикой, чтобы уменьшить размер страницы при загрузке и полностью обойти проблему конфликта. Надеюсь, это сработает и в вашем случае.

редактировать исправлена ​​опечатка

person Stefan Lindberg    schedule 17.02.2015
comment
Это сработало блестяще для меня, спасибо. Один момент, хотя у вас есть опечатка - переопределения должны быть переопределениями. - person Matt Wilson; 24.03.2015
comment
Ах, спасибо! Я исправил опечатку :) Рад слышать, что это сработало для вас. - person Stefan Lindberg; 24.03.2015

arrow_upward
0
arrow_downward

Я знаю, что это старый пост, но у меня была такая же проблема. У меня был Bootstrap 3.0.3, и обновление до версии ›=3.4.1 решило проблему.

 $('.btn').button();
 $('input[type=radio]').on('change', function() {
   var target = "#" + $(this).data("target");
   $(".chart").not(target).hide();
   $(target).show();
   kendo.resize($(".k-content"));
 });
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
      <input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
    </label>
    <label class="btn btn-default">
      <input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
    </label>
    <label class="btn btn-default">
      <input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
    </label>
  </div>

  <div class="bar-section k-content">
    <div class="chart" id="barChart"></div>
  </div>

  <div class="container-fluid pie-section k-content">
    <div class="row chart" id="pie-section"></div>
  </div>

  <div class="column-section k-content">
    <div class="chart" id="columnChart"></div>
  </div>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/

person Coding Lattice    schedule 08.04.2021
comment
Фрагмент не работает. Ошибка Jquery не определена. - person Zam Abdul Vahid; 09.04.2021