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.
Related
I'm working on a Drupal project that imports JQuery on all its pages. We started to use Vue.js by injecting it directly in the HTML pages for the development of dynamic components (not for a SPA).
The problem is that we have JQuery UI that conflicts with Vue.js. It will directly modify all the inputs of Vue.js by readapting their styles.
Is it possible to disable JQuery UI on a particular div, which would contain Vue.js? Without having to disable it on the whole page, because our header has a burger menu that uses JQuery UI.
We found a fix to correct this conflict between Vue.js and JQuery. This method will not completely disable JQuery on a given scope, but will disable a behavior that we were having trouble with.
$('select').selectmenu("destroy")
More about the method destroy here:
https://api.jqueryui.com/selectmenu/#method-destroy
"Like the Bootstrap jQuery plugin, the popover requires the tooltip module."
Is this why I can't get my popover to work? What is the tooltip module, do I need to import something else? I imported bootstrap, angular-bootstrap, angular, and angular-animate. I still can't get something as simple as this to work:
<button uib-popover="test" popover-placement="top" popover-trigger="mouseenter">test</button>
The plunker example never imports a tooltip module?
https://angular-ui.github.io/bootstrap/#/popover
It's a part of Bootstrap JS framework. You can enable it by in including either tooltip.js or bootstrap.js files on your page.
https://getbootstrap.com/javascript/#tooltips
As for your issue, it's probably caused by some version conflict between the frameworks -- I had similar problem as yours and managed to get it working by updating the frameworks (AngularJS, bootstrap, ui-bootstrap) to their latest versions.
Also, the popovers don't work on disabled elements (using ng-disabled) (see https://github.com/angular-ui/bootstrap/issues/1025 )
I have my Website build with JqueryUI widgets. Now I need to make Website responsive and I was recommended by a friend to use bootstrap for this ,but i read somewhere that using both JqueryUI and Bootstrap together cause some problems or conflicts,so my question is:-
Is any conflict occur ,if yes,then what kind of conflicts can occur.
Is there any way to avoid conflicts.
Any other way I can make my website responsive.
As per the comment suggest by me above i believe following link can be the answer Conflicts between JQueryUI and bootstrap
Hope this helps...
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.
Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.