Контекст JQuery UI и Bootstrap

Question

У меня возникли проблемы с группами кнопок для бутстрапа.

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

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

Я попытался с помощью бутстрэпами решение: («БТН»).

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

Тогда при вызове $ 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> 

И мои JS для обработки кнопок:

$('.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

Answer 1

Если вы просто Google это сообщение об ошибке, вы увидите, что it's a jQuery UI error message, поэтому $.fn.button в этом пункте вашего кода ссылается на плагин jQuery UI Button, не плагин Bootstrap Button.

Вы должны поместить noConflict После загрузки Bootstrap, но перед тем, как загрузить JQuery UI и т.д .:

<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(...) в остальной части кода.

Answer 2

Если вы используете 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" 
     ] 
    } 

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

редактировать фиксированной опечатка