Menu
Using 2 libraries at same page: jQuery UI and Twitter Bootstrap:
Now, the problem is both libraries has same named functions which conflicts with each other:
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.
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):
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
441
JavaScript supports overriding not overloading, meaning, that if you define two functions with the same name, the last one defined will override the previously defined version and every time a call will be made to the function, the last defined one will get executed.
JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).
Introduction to the JavaScript recursive functions A recursive function is a function that calls itself until it doesn't. And this technique is called recursion.
$(...); Which is the "jQuery function." $ is a function, and $(...) is you calling that function. The first parameter you've supplied is the following: function() {} The parameter is a function that you specified, and the $ function will call the supplied method when the DOM finishes loading.
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.
140
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
