Jump to content

Решение конфликта javascript библиотек - bootstrap и jquery-ui


Recommended Posts

vitaly

Решили добавить на сайт виджет от jquery-ui - Dialog.
В имеющейся на сайте библиотеке /jscript/jquery/plugins/jquery-ui виджет dialog отсутствует.
Скачали библиотеку с включенным виджетом Dialog.
Подключили в файле templates/vamshop4/javascript/script_footer.php загрузку двух файлов:
jscript/jquery/plugins/dialog/jquery-ui.css
jscript/jquery/plugins/dialog/jquery-ui.js

и добавили функцию открытия модального окна dialog:

dialog.dialog("option", "title", title).dialog("open");

Модальные окна открываются, но при добавлении товара в корзину подвисает страница сайта.
В консоли браузера отображается ошибка:

Uncaught Error: no such method 'hide' for tooltip widget instance

Нашли решение. 
https://stackoverflow.com/questions/17458224/uncaught-error-no-such-method-show-for-tooltip-widget-instance
Библиотеку jquery-ui необходимо загружать раньше библиотеки bootstrap.
Добавили загрузку jquery-ui в bender до загрузки bootstrap:

$bender->enqueue("jscript/jquery/plugins/dialog/jquery-ui.js");

Страница сайта подвисать перестала, но модальное окно теперь отображается без кнопки закрытия:

PjMs8.png

https://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon

Решение такое: перед запуском модального окна добавить в ява-скрипт функцию:

$.fn.bootstrapBtn = $.fn.button.noConflict();

Как-то так...

Link to post
Share on other sites
  • vitaly changed the title to Решение конфликта javascript библиотек - bootstrap и jquery-ui
support
18 минут назад, vitaly сказал:

Как-то так...

Спасибо большое, что поделились решением.

Если не против, я его в FAQ добавил.

По-моему я тоже с таким сталкивался, что нет крестика на окне, но так и не разобрался до конца.

Link to post
Share on other sites
×
×
  • Create New...