I started a project using ng-admin by akveo https://github.com/akveo/ng2-admin. The PrimeNG website specifies that one needs to add jQuery ui datetimepicker and jQuery datepicker in order to use their Calendar component. I did an npm install jquery-ui --save and it installed the files. However I'm clueless on how to add the reference on the webpack file and reference it properly.
thank you.
Yes, we call libraries like jQueryUi and jQuery 'broken modules' because they execute and rely on eachother in the global context. There are a few different methods to shim these kind of modules.
Here is a list of different options (as the solution cam vary per library). I like using the ProvidePlugin or using alias and externals.
I had the same error message, without using webpack yet. The solution, for this specific message, is in fact to declare/include jQuery BEFORE primeng.
So I just moved up the html tag adding jQuery to my page(s) and it went fine after that.
I don't know how to use webpack, but if there is a declaration order, just declare jQuery (or its subscript datepicker and datetimepicker) before primeng.
Related
I am getting a jQuery is not defined error from jQuery validate being loaded before jquery.
I am not sure if this is involved with using ASP.net Boilerplate or not, though in the bundle config I have the following:
bundles.Add(
new ScriptBundle("~/Bundles/vendor/js/bottom")
.Include(
"~/lib/json2/json2.js",
"~/lib/jquery/dist/jquery.min.js",
"~/lib/bootstrap/dist/js/bootstrap.min.js",
"~/lib/moment/min/moment-with-locales.min.js",
"~/lib/jquery-validation/dist/jquery.validate.min.js",
"~/lib/blockUI/jquery.blockUI.js",
"~/lib/toastr/toastr.min.js",
"~/lib/sweetalert/dist/sweetalert.min.js",
"~/lib/spin.js/spin.min.js",
"~/lib/spin.js/jquery.spin.js",
"~/lib/bootstrap-select/dist/js/bootstrap-select.min.js",
"~/lib/jquery-slimscroll/jquery.slimscroll.min.js",
"~/lib/Waves/dist/waves.min.js",
"~/lib/push.js/push.min.js",
"~/Abp/Framework/scripts/abp.js",
"~/Abp/Framework/scripts/libs/abp.jquery.js",
"~/Abp/Framework/scripts/libs/abp.toastr.js",
"~/Abp/Framework/scripts/libs/abp.blockUI.js",
"~/Abp/Framework/scripts/libs/abp.spin.js",
"~/Abp/Framework/scripts/libs/abp.sweet-alert.js",
"~/lib/flatpickr/dist/flatpickr.min.js",
"~/js/admin.js",
"~/js/main.js",
"~/Scripts/jquery.signalR-2.2.3.js",
"~/Views/Shared/_Layout.js"
)
);
So I am using the minified version of jQuery and the minified version of jQuery.Validate. As soon as I use the minified version of jQuery and I load a page, jquery.validate.min.js is the first script that gets loaded in and as expected it throws a jQuery is not defined. error.
Though as soon as I do not use the minified version of jQuery (jquery.js) the scripts are loaded up in the correct order.
Is ASP.NET Boilerplate using any custom file ordering in the bundles that I do not know of? I do believe that MVC, but could be wrong, that it will process explicitly named scripts first in the bundle, then symbolically named scripts. Though these are all explicitly named scripts.
Is there something I am missing or some solution on how I can solve this?
I ended up using an answer from here: https://stackoverflow.com/a/11981271/4201348
So pretty much I defined my own BundleOrderer called AsIsBundleOrder that implementsIBundleOrderer that just returned the files as is, and set that as the orderer to use in the BundleConfig.
That works, though still doesn't give me a complete answer as to WHY (the important reason in my mind) the default orderer was only promoting jQuery validate to be before jQuery only when I used the minified version of jQuery.
so the problem is this, I made a carousel with bootstrap and I just put bootstrap.js for javascript. But why does slide carousel not work? whereas if I put jquery, then it can work !! Is not there a javascript in the bootstrap.js file to call the carousel? any solutions? I want to create a carousel using bootstrap.js without using jquery.js
Bootstrap's JavaScript components depend on jQuery:
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
The quick start guide also states that jQuery is required:
Add our optional JavaScript plugins, jQuery, and Popper.js) near the end of your pages, right before the closing </body> tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend on them. While we use jQuery’s slim build in our docs, the full version is also supported.
You cannot get around this. If you want a carousel without jQuery, you should forget Bootstrap's carousel and look for another option. (For example here)
This is the first line of code from the bootstrap.js file for v3.3.7
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
the next line of code states that you need a minimum version of jquery 1.9.1 and a maximum of jquery 4 to be able to use bootstraps javascript
I am playing around with Angular.dart as app framework and trying Twitters Bootstrap components and CSS for styling. I did run into an issue almost immediately, since Bootstrap does not seem to handle ShadowDOM, and Angular.dart uses the ShadowDOM for Components.
This would essentially mean I cant build Angular components with Bootstrap.js. Using Bootstrap components only requiring CSS works fine with applyAuthorStyles: true in NgComponent annotation.
Is there any way to also build angular.dart components using bootstrap js components?
/Cenk
Several things can be fixed using applyAuthorStyles: true but selectors that cross the shadowDOM boundary don't work. You would have to change Bootstrap's css.
applyAuthorStyles is deprecated or already removed
Here Feature Request: Add templates for NgDirectives or a NgComponent non-shadow dom option is also a discussion going on about this topic.
It mentions a ng-pseudo directive that should help solving this issue.
AFAIK ShadowDOM will be ported to AngularJS as well maybe this creates some ally and eventually an improvment.
Polymer (JS and Dart) have the same problem.
I'm wondering if this is possible and if yes, how would I go about doing it? I'm trying to make the widget use a Jalali(Persian) Calender.
jQuery UI Datepicker localization
In general, to add localization to jQuery UI Datepicker you need to include a specific localization file immediately after including the Datepicker's script. For example, to set a French localization, you'd do this:
[...include jQuery and jQuery UI...]
<script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script>
The localization files are included as part of the the standard jQuery UI download, in a separate directory (development-bundle/ui/i18n). For more on this, see the Datepicker API documentation (under "Localization").
Current status: Farsi in, Jalali out
Currently, jQuery UI download package doesn't seem to include a Jalali localization file. For now, there seems to be only a regular (Georgian) calendar translated into Farsi (jquery.ui.datepicker-fr.js).
Solution 1 - custom localization file
If you prefer to stick with jQuery UI's datepicker, you can create a custom localization file, based on the format of existing localization files. If you're familiar with the calendar in question, it shouldn't be difficult.
Solution 2 - use a different plugin
Consider using the jQuery Calendars plugin instead. It already includes most common world calendars in several languages and formats, so generating a Jalali or any other foreign calendar for that matter is done by the flick of a setting.
Might be too late, but since I stumbled on it, here is a demo someone has been kind enough to put up. All credits to unknown author
http://jquery-ui.googlecode.com/svn/tags/1.6rc5/demos/datepicker/localization.html
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"