I am trying to use tooltip on a View that has reference to both jQueryUI and Bootstrap 3. I have made a sample here. If I load the Boostrap after jQueryUI's js then the tooltip() call is successful but if I call jQueryUI after Bootstrap then I get an error and nothing works. You can try it out yourself. There is a lot of talk going on about this on the Internet and I asked around GitHub but I could not find a solution yet.
Ideal solution will be to take QueryUI without tooltip. This will work. In case you don't want to do that please include Bootstrap after JQueryUI. Ensure you have unique components from each (you can custom build both libraries with required components)
Bootstrap has a way to to reset any component like:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
The above code will work when bootstrap is loaded after JQueryUI
Ref: http://getbootstrap.com/javascript/
Here is relevant code from Bootstrap:
var old = $.fn.tooltip
$.fn.tooltip = function (option) {
....
}
$.fn.tooltip.noConflict = function () {
$.fn.tooltip = old
return this
}
Instead of including jquery-ui.js, include individual libraries as needed and leave out jquery-ui tooltip.
For example if all you need is jquery-ui sortable then use this:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
the simplest solution is put jquery-ui.js first and then bootstrap-datepicker.js
this works for me.
I have posted a relevant answer with more details in this SO thread: https://stackoverflow.com/a/71176542/1932141
Basically, you can do something like this:
<script src="/js/bootstrap.js"></script>
<script>
var bsTooltip = $.fn.tooltip;
</script>
<script src="/js/jquery-ui.js"></script>
and then you can initialize bootstrap tooltips this way:
// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
sorry if I am repeating this question, but I am quite new in requireJS and I do not fully understand the way it works.
I am trying to implement amazon-like navigation with diagonal movement over elements. I found a jQuery plugin (https://github.com/kamens/jQuery-menu-aim) for that but I want to implement it with help of requireJS.
In common way you just include all necessary scripts with <script> tag (Jquery and the plugin). Then you find your navigation and assign some functions on activating/ deactivating submenu. Like example:
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../jquery.menu-aim.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {//do something}
function deactivateSubmenu(row) {//do someting else)
</script>
In requireJS way. In the navigation.js file i required menu-aim plugin in the beginning and tried to implement it like this:
var menuAim = require('lib/menu-aim');
// some code
var $menuT = $('#nav-main-deep');
$menuT.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(){
console.log('test1');
}
function deactivateSubmenu() {
console.log('test2');
}
And i put whole plugin menu-aim.js between:
define(function () {
//whole menu-aim plugin
});
Probably, this is not the way how to run requireJS plugin, cause its doing nothing (i tried to do some console logs). I tried to look at requireJS doc but I still dont understand how to do it right..
Will be very thankfull for advices..
From the GitHub code, it looks like jQuery-menu-aim is not using a universal module definition, so it needs some help from your RequireJS config.
A shim can help RequireJS sequence the dependencies since this is a jQuery plugin and jQuery must be loaded first and passed into it. Click here for more information on RequireJS shims.
Add this code to your RequireJS config file
requirejs.config({
shim: {
'menu-aim': {
deps: ['jquery']
}
}
});
and when you call
require('lib/menu-aim', function() {
// put your menu code here
});
jQuery and the menu plugin will be loaded.
I'm trying to make jQuery UI work, but it doesn't. Here's what happens.
I'm loading dependencies:
<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>
That's my main.js file:
$(function () {
$("input[type=submit]")
.button()
.click(function (event) {
event.preventDefault();
});
});
$(function () {
$("#circum").buttonset();
});
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
When I run the code in Brackets jQuery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined
I've found this thread discussing the issue, but still wasn't able to fix it.
Github
Cheers.
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jQuery 3.0.
After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
Adding the jQuery 3 Migrate Plugin resolves this issue as noted here, updated UI will be coming out soon.
NOVEMBER 5, 2018 UPDATE
If using latest jQuery and jQuery UI , use latest jQuery migrate to prevent compatibility warnings/issues.
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
including below script resolved the issue for me.
https://code.jquery.com/jquery-migrate-3.0.0.min.js
After doing all of the updates and STILL having the problem, I just fixed it in the code:
Look for this:
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem.
The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option.
Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset" worked for me.
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
I had same issue with jquery-3.0.0. I have just included jquery-migrate.3.0.0 reference after jquery reference. Issue is resolved and its working fine now.
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script> tags.
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
Those links are now working and they could fix the issues.
I'm trying to get a JQuery dialog to appear and immediately got the error $(...).dialog() doesn't exist. My googling has revealed that this is usually caused by loading 2 different JQuery libraries but the only script tags in my file are for JQuery and Twitter Bootstrap. Here's my code (including my dialog code adapted from How to implement "confirmation" dialog in Jquery UI dialog?)..
<script src="jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
...
<script>
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$(".deleteLink").click(function(e){
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Yes" : function(){
window.location.replace(targetUrl);
},
"No" : function(){
$(this).dialog("close");
}
}
});
});
});
</script>
Is there any other reason that I might be getting this error besides loading multiple libraries or does bootstrap maybe provide interference of some kind?
You are attempting to use the dialog() method and properties of jQueryUI, yet you have included the Bootstrap library. To use the Bootstrap dialog, the method is called modal().
Bootstrap Modal docs
Note that the properties are completely different. If you want to use the jQuery UI dialog() method, you would need to include the jQueryUI library, however be aware that this sometimes causes incompatibilities with Bootstrap, in both the JS and CSS.
Ok, I have included the google api libraries for Jquery UI, like so:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js' ></script>
Now I have a script that updates some spans and a hidden input on document slide and not only, on document ready:
<script type="text/javascript">
$(document).ready(function()
{
var slider=$('#slider_range').slider({
range:true,
min:0,
max:5,
step:1,
values:[0,3],
slide:function(event,ui)
{
$('#level').val(ui.values[0]+'-'+ui.values[1]);
$('#low').html(ui.values[0]);
$('#high').html(ui.values[1]);
}
});
var s=slider;
if(s.slider("values",0)==s.slider("values",1))
{
$('#level').val(s.slider("values",0));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",0));
}
else
{
$('#level').val(s.slider("values",0)+'-'+s.slider("values",1));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",1));
}
});
</script>
The ideea is that on a page it shows the slider and on another not.
The error message I get from Firebug is this:
$("#slider_range").slider is not a function
And points to the line
slide:function(event,ui)
What could be causing this? Why on a page the slider can be seen and on another (which uses the same template that loads the above) can`t?
Please help!
There were two differing jquery libraries included on the second page.
I just had the same error while i used the foundation framework from zurb along with jquery ui slider.
Problem #1:
the foundation framework 3.2.4 already delivers jquery 1.8.1 and i tried to include my own copy of jquery 1.9 just before the foundation files. (= duplicate jquery inclusion)
Problem #2:
the order of my inclusions. jquery ui needs to be included AFTER the foundation framework files.