Since most of the example available in Internet is working based on Internet.
I would like to download and use. I don't want to use either CDN or openlayer.org in my code.
Is it possible to use openlayers without a CDN?
Yes. Like any library, you can download locally. This page has some download links to get the CSS and JS files: https://openlayers.org/download/
You download and unzip those into a folder that is accessible from your web server. Usually this is a scripts subfolder
Then you simply reference them as explained here:
https://www.w3schools.com/css/css_howto.asp
https://www.w3schools.com/tags/att_script_src.asp
(note these are very basic W3C references. You should really know this)
So if you downloaded those .js and .css files into a scripts subdirectory you do this:
<script src="scripts/theopenlayersscriptfile.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/theopenlayerscssfile.css">
Edit:
After some experimenting and investigation, you mention that it is trying to access https://c.tile.openstreetmap.org/4/6/6.png
I googled and found this link
https://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example
Which says
With this example you can browse your tiles stored localy without any webserver. I use this to check my tiles I downloaded to use in Osmtracker. But you can also browse Tiles rendered by any other techniques.
The instructions at this link appear to explain exactly what you want to do - it has references to all of the files you are trying to use.
I read this excellent tutorial : http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr.
I then downloaded the NuGet example package Microsoft.AspNet.SignalR.Sample 2.2.0 (https://www.nuget.org/packages/microsoft.aspnet.signalr.sample), and then I created new asp.net mvc 5 project with vs 2015 with an index page.
I assume that app.MapSignalR() is called in the Startup.Configuration method.
Like lots of people I got the error: ticker.client is undefined.
The real problem is the var ticker = $.connection.stockTicker, is always null because $.connection has no stockTicker property defined - because the hub can't instantiate it.
Does anybody know the reason for this error?
The orignial tutorial is http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr I hosted my sample project zip to my open onedrive : https://onedrive.live.com/embed?cid=11357B31E08CCFEE&resid=11357B31E08CCFEE%21107&authkey=ALMOtmTFdCdsyV8
The "SignalR.Sample" directory content in the solution is the basic Template to integrate in asp.net mvc 4/5/6 project. So I integrate it in Views/Home/Index.cshtml page. Js refernces are in file Views/Shared/_Layout.cshtml .
Exact problem is var ticker = $.connection.stockTicker is null (no initialize connection done with the server).
If you can help me, i thank you.
Yes, you added the jQuery and Stockticker scripts in your _Layout, but you didn't add the signalr/hubs. The scripts must be loaded in this exact order:
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/SignalR.StockTicker.js"></script>
Reference:
ASP.NET SignalR Hubs API Guide - JavaScript Client
Make sure that the JavaScript file references in StockTicker.html are correct. That is, make sure that the jQuery version in your script tag (1.10.2 in the example) is the same as the jQuery version in your project's Scripts folder, and make sure that the SignalR version in your script tag is the same as the SignalR version in your project's Scripts folder. Change the file names in the script tags if necessary.
Make sure you have Any CPU as your active solution platform. I switched it to x64 and that made it so SignalR could not load since it had an incorrect platform.
I want to include the URL of jQuery UI http://code.jquery.com/ui/1.9.0/jquery-ui.js in my JSF page. I saw many questions which said <h:outputScript> should be used, but in none of the answers I saw an example as to how to include an URL. The answers were only relevant if the js file is present in some folder of the project.
Can someone please help where I have to include it in my page?
Just use plain HTML <script> element the usual way.
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
The <h:outputScript> can only refer local scripts. You'll only miss its dynamic versioning, modularity and relocation advantages, but that should technically not harm for a static and external script.
It's however possible to use a custom ResourceHandler to change the URL of a <h:outputScript> to be an external URL for pure CDN purposes. OmniFaces CDNResourceHandler is such an example.
Unrelated to the concrete problem, PrimeFaces components are built around jQuery/UI. Are you absolutely positive that you need a separate instance of jQuery UI library?
I'm using the Firefox Add-On SDK to port a Chrome extension to Firefox. In Chrome, it's trivial to load third-party libraries like Underscore or Backbone. In my particular case, I'm using jQuery, Underscore and Backbone to define models that communicate with cross-domain REST APIs.
It's unclear to me how you might do something similar in Firefox. From what I can see main.js corresponds directly to Chrome's background pages, but it doesn't appear there's a way to load js files.
Am I missing something?
Add-on SDK supports CommonJS modules sysem, same modules that are also used by nodejs
https://github.com/mozilla/addon-sdk/tree/master/app-extension
Underscore has a support for commonjs module format & there for can be loaded easily
https://github.com/documentcloud/underscore/blob/master/underscore.js#L54-L65
All you need is drop underscore in next to main.js and loaded it as follows:
var _ = require("./underscore")
I do believe backbone can also be loaded in a similar way as people have being using it
on nodejs.
It's won't work for the jQuery though, that's because context where add-on SDK modules
run is different from typical web page context with DOM, which is what jQuery is designed
to work with.
Now if you want to do cross domain requests there SDK comes with a module to do that:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/request.html
There is also another low level XHR module, that you could use instead:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/api-utils/xhr.html
So if you just want to write models and talk to REST API it should be pretty trivial, I'm
not sure what's the role of jQuery in your use case. It implies DOM and UI you want to
display. If so there is several modules in SDK that would let you add custom UI for the
firefox and you can probably find useful tutorial on that subject:
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/index.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"