Short
Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:
jQuery UI very important for me because nearly all UI things built based on it
Twitter Bootstrap only for split button with dropdown menu functionality.
Now, the problem is both libraries has same named functions which conflicts with each other:
Detailed
Here is example of conflict between jQuery UI and Twitter Bootstrap button functions
Please enter to this website. Press Recommend button on table
jQuery UI modal window will appear. I used jquery ui combobox inside modal window. The problem is, there is no down arrow button as shown on jquery ui combobox demo.
I tried to find what causes the problem: Looked through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js.
As you see it's proof of conflict between 2 js libraries.
Btw, Here is jsFiddle where it works well without bootstrap.
Problem
I have multiple ways to solve this conflict problem (WITHOUT TOUCHING FUNCTIONALITY OF THE WEBSITE) I need to get exactly same functionality as split button with dropdown menu (Twitter Bootstrap):
if possible in jQuery-UI (something like this but with dropdown menu)
else in CSS + HTML only
and get rid off Twitter Bootstrap. Any solutions greatly appreciated. I'm ready to give 200 reps to good answer (as bounty). Thx in advance
The current version of bootstrap (v2.2.2) now has a noConflict option. Just insert this some place after your bootstrap and jquery script tags but before any usage of the button() function.
<script type='text/javascript'>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
Alternatively, you can use $(document).ready(handler), but you still have to make sure substitution occurs before button() is called.
Once that line of code is executed, button() will be JqueryUI's button, and bootstrapBtn() will be Bootstrap's version.
To fix the collision between Bootstrap and jQuery UI functions, rename one of them:
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
$.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
And then you can call each function at will:
<script type="text/javascript">
$(".button-one").button() // jQueryUI button
$(".button-two").bsbutton() // Bootstrap button
</script>
You can use this technique for any function you need.
Remember the order include A -> rename A -> include B.
If you are only using the dropdown plugin of Twitter Bootstrap, you don't need the .button() plugin.
Go to the customize bootstrap page and unselect all jQuery plugins, then choose only the dropdown one. You could also unselect some of the CSS if you want.
If you need both implementations (Twitter Bootstrap and jQuery UI), you could rename all .button to something like .bsButton in the bootstrap-button.js file (or find this section in a non-minified version) - not tested.
All other answers fixing conflict between jQuery UI button and bootstrap button but you can't use bootstrap data-api for renamed button() function. Only manually using new-named bootstrapBtn() function.
I find a solution:
Find and replace all occurences of regex (\$[.\w]+\.)button to \1btn in bootstrap.js file.
Or use this sed script:
#!/bin/bash
# Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js
After that you can use bootstrap data-api for button binding and also manually use btn() function in place of button() for Bootstrap while still use jQuery UI button() function.
I suggest to do custom jQueryUI, or Bootstrap build - both offer this possibility on websites.
I use custom build of jQueryUI with core, effects, interactions, but without widgets, which often causes conflicts.
Related
Live filter, source: [jsfiddle/M2mUF/][1] is in conflict with fancy Box`s libraries(jquery live filter library in conflict with fancy libraries fancyapps/fancybox/. I need a popup iframe script which no conflict with live filter library.
Other multi filter testing is tommyp.github.io/multifilter/ , but this is in conflict with fancy box or other popup script.
Please, help me!
use jquery's method - jQuery.noConflict(), it is specifically designed for preventing jquery from conflicting with any other scripts . Here is its Documentation for further refrence
on how to use it..
I am using Magento 1.7 version. On my checkout page I have added Autocomplete code with jquery-1.10.2.js and jquery-ui.js. If I use jQuery.noConflict(); below the jquery-1.10.2.js, the Autocomplete works perfectly however I am not able to see the Menubar. And if I use jQuery.noConflict(true); it is showing menu however, I am not able to select the Autocomplete City Value by keybord (I am able to select the City Value by Mouse).
What could be the issue?
What is missing?
Where am I going wrong?
What/Where should I place jQuery.noConflict(true)/jQuery.noConflict()?
your help is appreciated.
noConflict(true) will set $ as the jQuery variable, and you can no longer use jQuery to call functions like jQuery('#someelement).focus() because jQuery will be undefined.
If you code
<script type="text/javascript">
$ = jQuery.noConflict(true)
</script>
as the first line of the html, and then replace every jQuery with $ (which is good practice anyways) then you shouldn't have a problem.
ISSUE: I have situation where jquery ui is loaded and after the jquery ui library is loaded, a custom library is loaded.
This custom library defines an accordion for jquery, thus overwriting the jquery ui accordion.
QUESTION: Is their something I could do in document.ready to define another accordion based off of the jquery ui accordion? Then use this new accordion? Or is their a way to directly call the jquery ui accordion?
The following code obviously calls the second libraries accordion...
$("selector").accordion
I can see the accordion is defined by doing the following in a browser debug console...
jQuery.ui.accordion
but I don't see how I can call it.
I don't have access to the main template for the site, so I can't modify the order of libraries loading. Also, the accordion from the second library is used across the site and it does NOT function at all like the jquery accordion.
Add this:
$.fn.uiAccordion = $.ui.accordion;
$.widget.bridge('uiAccordion', $.ui.accordion);
Call like so:
$('selector').uiAccordion();
DEMO
I'm developing website. Using 2 libraries at same page: jQuery UI and Twitter Bootstrap.
I single-stepped through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js. The question is, how to resolve the conflict between these two libraries?
BTW, Here is jsFiddle where it works well without bootstrap
If button is the only conflict then you may save $.fn.bootstrap_button = $.fn.button after loading bootstrap, and then load jqueryui. Or you may configure and download bootstrap without button widget.
i'm with a little trouble here. Trying to install fancybox i'm getting this javascript error:
'undefined' is not a function (evaluating '$("a.fancybox").fancybox()')
here is my HTML
<a href="http://localhost/vm/wp-content/gallery/txt/l2.jpg" class="fancybox">
<img src="http://localhost/vm/wp-content/gallery/testando/thumbs/thumbs_l2.jpg">
</a>
and my javascript
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>
Has anyone encountered this problem?
Thanks !
I've run into a similar problem when a page has two copies of jQuery. So, make sure you only have ONE copy of jQuery on your page.
What happens is that Fancybox is extending itself from the first copy of jQuery; but because of a second copy, the document ready is being called from that copy only. And of course Fancybox is not applied to it.
I am assuming that you are using fancybox v1.3.x because that version cannot display dynamically added elements in Fancybox (FYI Fancybox v2.x can handle existing and dynamically added elements).
If you don't want to upgrade to Fancybox v2.x then you have two options:
Use the jQuery livequery plugin
or
Rebuild you script and use jQuery delegate() to trigger fancybox with the new elements
Both options are explained here.
Please notice that using the jQuery delegate() solution won't work with Fancybox galleries, only with single elements.
If you don't want to use the livequery plugin and still want to use Fancybox galleries of dynamically added elements, alternatively you could upgrade to jQuery 1.7+ and use the new API jQuery on()
I have a demo page here that shows how to use jQuery on() to display Fancybox galleries with existing and dynamically added elements. Please feel free to look at the source code.