I used to use jquery ui on my website www.iusefaith.com but have stopped yet Google lighthouse still sees Jquery Ui on my website. Here is a link to the lighthouse report. Lighthouse says I have jquery ui meanwhile i have removed it.
Why does Google lighthouse see jquery ui vulnerability on my website even though i am no longer using jquery ui ?
Line 69 of: https://res.cloudinary.com/iusefaith/raw/upload/v1606174446/iusefaith_general_jquery_scripts_light_compressed.js
A few hundred characters along (after what looks like Modernizr) I see:
(function(e,t){function i(t,i){var a,n,r,o=t.nodeName.toLowerCase();return"area"===o?(a=t.parentNode,n=a.name,t.href&&n&&"map"
compare it to jQuery-ui 1.10.3
(function(t,e){function i(e,i){var n,o,a,r=e.nodeName.toLowerCase();return"area"===r?(n=e.parentNode,o=n.name,e.href&&o&&"map"
It looks like jQuery-ui from the first few characters there. You need to clear any cache plugins you have and ensure whatever builds the file I linked above doesn't include jQuery-ui anymore.
I am using jeditable and i needed to integrate with jeditable-datepicker and Autocomplete
everything works fine apart from this incompatibility between them.
I have noticed that the problem is caused by the script
<script src="jquery-ui-1.8.24.custom.min.js"></script>
which makes working my jQuery datepicker, if i remove it the autocomplete starts working again but obviously my Jquery date picker stops working.
How can i figure it out my issue? there is a way to make them working together?
Thanks
i found the solution, i explain it here, it might be useful for someone in the future.
i have downloaded again the custom jQuery , i have deselected all the options just keeping the Datepicker Widget and then pasted the new script in my page and the incompatibility was gone!
I am using Twitter Bootstrap and I want to use an "auto-suggest" which is not available in Bootstrap, whereas jQuery UI has its own methods for auto-suggest.
Can I use both? Will it overload the bandwidth?
Check out jquery-ui-bootstrap. From the README:
Twitter's Bootstrap was one of my favorite projects to come out of
2011, but having used it regularly it left me wanting two things:
The ability to work side-by-side with jQuery UI (something which
caused a number of widgets to break visually) The ability to theme
jQuery UI widgets using Bootstrap styles. Whilst I love jQuery UI, I
(like others) find some of the current themes to look a little dated.
My hope is that this theme provides a decent alternative for others
that feel the same. To clarify, this project doesn't aim or intend to
replace Twitter Bootstrap. It merely provides a jQuery UI-compatible
theme inspired by Bootstrap's design. It also provides a version of
Bootstrap CSS with a few (minor) sections commented out which enable
the theme to work along-side it.
just to update this, bootstrap v2 no longer conflicts with jquery ui
https://github.com/twbs/bootstrap/issues/171
Edit: as #Freshblood there are a few things that still conflict. However, as originally posted Twitter suggests that they are working on this and it largely works, specially compared to v1.
For future reference (since this is google's top answer ATM), to prevent jQuery UI from overriding bootstrap's or your custom style, you need to create a custom download and select the no-theme theme. That will only include jQuery UI's resets, and not overload bootstrap's style for various elements.
While we're at it, some jQuery UI components (such as datepicker) have a native bootstrap implementation. The native bootstrap implementations will use the bootstrap css classes, attributes and layouts, so should have a better integration with the rest of the framework.
In my limited experience I am coming across issues as well. It appears that JQuery elements (such as buttons) can be styled using bootstrap CSS. However, I am experiencing issues having created a JQuery UI tab and wanting to lock a bootstrap only input (using the input-append class) to the bottom of each tab, only the first sits correctly. So, JQuery tabs + Bootstrap buttons = probably not.
Bootstrap still doesnt work with Jquery UI, for example the modal.Bootstrap has nice style but as a framework with Twitter behind isnt that good.
If you're running into javascript namespace collisions, you can use Bootstrap's noConflict() function make it cede functionality to jQuery UI.
Although this question specifically mentions jQuery-UI autosuggest feature, the question title is more general: does bootstrap 3 work with jQuery UI? I was having trouble with the jQUI datepicker (pop-up calendar) feature. I solved the datepicker problem and hope the solution will help with other jQUI/BS issues.
I had a difficult time today getting the latest jQueryUI (ver 1.12.1) datepicker to work with bootstrap 3.3.7. What was happening is that the calendar would display but it would not close.
Turned out to be a version problem with jQUI and BS. I was using the latest version of Bootstrap, and found that I had to downgrade to these versions of jQUI and jQuery:
jQueryUI - 1.9.2 (tested - works)
jQuery - 1.9.1 or 2.1.4 (tested - both work. Other vers may work, but these work.)
Bootstrap 3.3.7 (tested - works)
Because I wanted to use a custom theme, I also built a custom download of jQUI (removed a few things like all the interactions, dialog, progressbar and a few effects I don't use) -- and made sure to select "Cupertino" at the bottom as my theme.
I installed them thus:
<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>
For those interested, the CSS folder looks like this:
[css]
- bootstrap-3.3.7.min.css
- font-awesome.min.css
- style.css
- [cupertino]
- jquery-ui-1.9.2.custom.min.css
[images]
- ui-bg_diagonals-thick_90_eeeeee_40x40.png
- ui-bg_glass_100_e4f1fb_1x400.png
- ui-bg_glass_50_3baae3_1x400.png
- ui-bg_glass_80_d7ebf9_1x400.png
- ui-bg_highlight-hard_100_f2f5f7_1x100.png
- etc (8 more files that were in the downloaded jQUI zip file)
If don't store it locally and use the link that they provide you might have an improved performance.The client might have the scripts already cached in some cases. As for the case of jQueryUI i would recommend not loading it until necessary.
They are both minimized, but you can fire up the console and look at the network tab and see how long it takes for it to load, once it is initially downloaded it will be cached so you shouldn't worry afterwards.My conclusion would be yes use them both but use a CDN
Yes you can use both. js bootstrap from twitter is a collection of jquery plugins. There shohuldn't be any conflict with jQuery UI.
Regarding bandwidth overload, it really depends on how you handle the requests to load all of your js files. if you really dont want to make multiple requests to the server to request for each file, just append them together and minimize. Or you probably can get rid of some js bootstrap plugins you dont need. it is very modular.
Kendo UI has a nice bootstrap theme here and a set of web UI comparable to jquery-UI.
They also have an open source version that works nicely with the theme.
I have site developed using jquery ui, I just tried to plug in bootstrap for future development and styling but it breaks virtually everything.
So No they are not compatible.
Because this is the top result on google on jquery ui and bootstrap.js I decided to add this as community wiki.
I am using:
Bootstrap v3.2.0
jquery-2.1.0
jquery-ui-1.10.3
and somehow when I include bootstrap.js it disables the dropdown of the jquery ui autocomplete.
my three workarounds:
exclude bootstrap.js
or more to typeahead lib
move from bootstrap.js to bootstrap.min.js (strange, but worked for me)
The data-role="none" is the key to make them work together. You can apply to the elements you want bootstrap to touch but jquery mobile to ignore.
like this
input type="text" class="form-control" placeholder="Search" data-role="none"
Im building a search autocomplete using Jquery UI. Everything worked perfectly fine when I built the search in a minimal document with nothing but an input. eg:
<input id="autocomplete" />
and the Jquery
<script>
$( "input#autocomplete" ).autocomplete({
source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p']
});
</script>
However, once I place my code into a Sitefinity 3.7 page, I get an error, telling me that "$("input#autocomplete").autocomplete" is not a function.
This error only occurs once its in sitefinity
Things Iv tried
Im using the latest Jquery UI library with the autocomplete widget.
Iv checked that my file paths are correct. (they are).
Used alerts eg
alert("$('input#autocomplete').autocomplete")
they keep returning undefined.
Any help would be much appreciated!
Sitefinity itself employs jquery and is probably overriding many of the base classes/methods with the same shorthand classnames ($, Jquery).
The consequence is that you cannot have your javascript on your page BEFORE any sitefinity page elements/controls are being inserted. I was having this same issue. I moved all my javascript AFTER the sitefinity elemens, to the bottom of my pages and everything worked fine again.
Bear in mind, what is actually happening in this case is that
sitefinity injects their own jquery, then
your link to the jquery.min.js file overrode sitefinity's.
So it's possible that doing this may actually break some of sitefinity's jquery-based functionality, although I haven't had any issues in the last 2 months.
You can also try using the sitefinity built-in version of jQuery (which is what Telerik recommends at the forum link below, although I didn't have much luck with this technique):
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
Here's the link to a recent Sitefinity forum post regarding this exact same issue:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/jquery-popup-not-working-in-telerik-webapplication.aspx
Good luck!
I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.