We have an application written entirely dart/polymer with quite a few polymer components. We use the custom tags in out index.html and compile to dart with pub build. The compile to javascript creates index.html of 24K lines. Original index.html is 150. The application works perfectly.
However we would like to distribute the code to third party sites so that they also can use the components with custom tags. Ideally by just linking to an already compiled script and simple using our custom tags in their pages.
I know this is possible without polymer. Question is does polymer support this? Is it possible to compile a polymer app and keep to a minimum amount of changes in the html file?
To reduce the problem to an example:
We would like our customers to be able to do some thing like this, without the use of dart sdk:
<head>
<script src="what_ever_required.js"></script>
<script src="our_application.js"></script>
</head>
<body>
<our-custom-tag></our-customer-tag>
<p>What ever else content</p>
</body>
Regards
That's currently not supported.
Currently an application that used Dart code needs to be compiled to JS as a whole at once. There is no way to build parts of a Dart application and compose an application from them later.
With the upcoming DDC (Dart Development Compiler) there might be a way to accomplish that. An experimental approach is https://pub.dartlang.org/packages/polymerize
I am using breeze with angular.
I have upgrade breeze to 1.4.11 and install breeze.angular.js.
The beginnings of a "breeze service" that tells Breeze to
use $q for its promises rather than Q.js
use $http for AJAX calls.
Consequently Breeze no longer requires the jQuery or the Q.js libraries
although non-Breeze code in your app may require either or both.
My problem is that I am still using breeze.savequeuing.js which requires window.Q.
Is there any official solution for this scenario or I have to manually change breeze.savequeuing.js?
It is simple. I can use HACK from angular.breeze.js breeze.Q is $q
We do not yet have an Angular version of breeze.savequeuing. It's on my backlog but way down the list as I try to discourage folks from getting in a situation where it is needed.
You are welcome to write one and contribute it. I recommend writing it as a real ng service rather than a simple Q-for-$q hack. If you like I'll look it over and give you my thoughts.
All the best.
As you mention "discouraging folks ..." I have to mention that the Breeze Todo Sample makes use of breeze.savequeuing.js:
<!-- 3rd party libraries -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<!-- Q is needed by breeze.savequeuing, not by Breeze-->
<script src="Scripts/q.min.js"></script>
<script src="Scripts/breeze.debug.js"></script>
<script src="Scripts/breeze.angular.js"></script>
<script src="Scripts/breeze.savequeuing.js"></script>
<script src="Scripts/toastr.js"></script>
Perhaps you may use this sample to show everyone to show how not to get into the situation where savequeuing.js is needed :-)
How and where to put your own JS files in JQueryMobile web applications?
Some suggestions I found:
only in the first page of the web app, usually index.html
inside the JQM page
Which one is better approach?
After your jQuery Library and BEFORE your jQuery mobile library. I place all my script tags at the end of the body...but that's not a must...
<script type="text/javascript" src="jQuerySource.js">
<script type="text/javascript">
/*Your stuff*/
</script>
<script type="text/javascript" src="jQueryMobileSource.js">
Why?: Because when you're building your jQM application you're going to want your event bindings to be defined before jQuery mobile gets initialized and fires the 'mobileinit' event and your first page's 'pageinit' event.
Just put your script after the JQM script tag
Yeah, that's all
It is a good idea to use jQueryMobile javascripts from Google CDNs because of following reasons:
1. You can directly include minified version in your pages.
2. You save bandwidth cost
3. Most importantly there are good chances that the JS might already be loaded on your user browser's. Because many other web apps use them.
So you should use
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
So, if all your code is inside document.ready() ; you can use it at end [ which loads the page faster]
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
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"