I'm trying to import external JavaScript file (which uses jQuery) to my ionic 3 project.
To install jQuery, based on this answer, I ran:
npm install jquery --save
Then I can see that jQuery is working by executing some code inside $(document).ready from the first page of my app (it works).
Now I need to include reference to my external jQuery library, which I've done in src/index.html by:
<script src="assets/js/myLibrary.js"></script>
myLibrary.js uses jQuery by:
(function($, window, document) {
...
})(jQuery, window, document);
But unfortunately I get jQuery is not defined error from the library file.
I'm not sure if jQuery is not yet ready or something else, I tried adding defer attribute to the script import but with no luck.
Any ideas?
You could just do this in your html file. Please note that you can only do that when you have wifi.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I ended up putting jquery in src/assets/jquery.min.js, and then in index.html I added a script reference before the jQuery-dependent library I wanted to use:
<script src="assets/jquery.min.js" defer></script>
<script src="assets/js/myLibrary.js" defer></script
I'm not sure if that's the correct way to do this in ionic, and I'm not sure if that makes a duplicate import of jQuery [I already imported it via npm install jquery --save].
Anyway it works - FYI for anybody looking in this thread in the future.
Related
I want to use some external jQuery libraries in my Angular project.
I added these libraries inside index.html file, but they are not working. I also added my .js files in angular.json, but the problem still exists. I add libraries like this:
<!-- CUSTOM JS -->
<script src="assets/js/jquery.app.js"></script>
Actually the code in this js file is not reachable. It seems Angular does not understand it to go and run that specific function in this file.
I expect a menu item shows its sub menus but the jQuery code does not work in Angular.
As you use Angular, you probably also use the angular/cli.
In that case, just add your file in the angular.json file like :
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
This will let angular import your external lib in the end bundle.
You will find more informations in the official documentation :
https://github.com/angular/angular-cli/wiki/stories-global-scripts
For my project I need to install the "Loadingbar.js" lib to one of my pages (which you can find here: https://loading.io/progress/).
I did paste the CSS in my global "style.css" file.
So, first, I just tried to put the <script></script> in my index:
<script type="text/javascript" src="assets/js/loading-bar.js"></script>
It worked for few hours, and now it does not work anymore. So I tried everything: I tried to put the <script> everywhere on each line of my index.html or even in the html of my page, in the body, under the body, under the <app-root></app-root>... nothing worked.
Also, the Angular project is sometime trolling me: the js is loaded once very rarely. If I refresh the page without changing anything- it does not work anymore.
I tried to add "defer" to the <script></script>.
I tried to wait document ready, I tried the setTimeout, but it never worked.
I tried to add the path to the script in "angular.json", didn't work.
What can I do to make this work? How do I add JS lib to an angular project?
Thanks.
First thing you should know is that in angular applications it's better to use npm dependency of any library if possible. If this is not possible and you need to use external js files, you can follow these steps:
First, put your js inside the node_modules folder. eg: node_modules/test-lib/loading-bar.js
Inside your app.module.ts, you can put this line at top of the file:
import test-lib/loading-bar.js(without node_modules)
Loading.io links their library to their GitHub account.
They offer an Angular example here:
https://github.com/loadingio/angular-loading-bar
It looks like the best approach is to install the library via npm or yarn.
I'm working on an admin panel built on top of AdminLTE template. The template depends on jquery, bootstrap and some other custom plugins that must be previously included using script tags in document head.
I'm using Jspm to manage libraries, some libraries like Toastr will require jQuery as a dependency, and will install and load another copy of jQuery.
I'm trying to figure out how to configure SystemJS in order to:
a) Tell SystemJS that I don't need install another copy of jQuery and
b) avoid duplicate loading of jQuery, since it's a global dependency that was previously loaded. How to achieve this?
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
...
<script src="system.js"></script>
<script>
System.config({
"map": {
"jquery": window.jQuery //???
}
});
</script>
<script>
System.import('main').
</script>
Looks like you want to use System.set
System.set( 'jQuery', System.newModule({'default': window.jQuery }) );
This assumes the global is expected to be the 'default'. You can also specify other exports as well by passing in more key / values to System.newModule.
If you can, it would be better to import your globals like other scripts because globals can have dependencies and systemjs can manage the load order for you through meta config setup
Problem: I have jQuery datepicker in react app, which has to be localised in different languages(30 lang). I downloaded all the i18n file from the link (https://github.com/jquery/jquery-ui/tree/master/ui/i18n) but it has to be included as <script> tag.
Question: Is there a way to import this file? using webpackand commonjs?. I am using es6 import. Is there a way to bundle them all and import in the on file?
any suggestions are appreciated.
Edit:
Yes there's a way:
You can create a javascript function that takes the path as a parameter and creates these HTML lines:
<script src="js/datepicker-in-all-languages/datepicker-af.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar-DZ.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar.js"></script>
...................and for all other 30 languages................
And you'll just have to call this:
loadLib("datepicker-in-all-languages/datepicker-af");
loadLib("datepicker-in-all-languages/datepicker-ar-DZ");
loadLib("datepicker-in-all-languages/datepicker-ar");
Edit:
Also take a loot at Grunt which is meant for the same purpose.You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.:
GRuntJS usage(According to their official page): With literally hundreds of plugins to choose from, you can use Grunt
to automate just about anything with a minimum of effort.
Edit:
There is also a minified file of jQuery ui i18n which is being hosted by google. You can use it in single <script> tag : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js . I found it in answers here here.
Using requirejs my main.js looks like this
requirejs.config({
baseUrl: '/javascript/',
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
async: 'requirePlugins/async',
hbs: 'hbs'
},
waitSeconds: 7
});
define(['common'], function () {
loadFonts();
});
The main.js is included in the page with a script call
<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
Common is the basic function for the website, jquery doc ready function etc. wrapped in a define call:
define(['jquery'], function() {
//jQuery dependant common code
});
This works fine, jQuery is loaded from the google CDN and the code is executed. But when i add a require call after the load of main.js
<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
//code
});
jquery is requested from /javascript/jquery.js instead of the defined path to the google cdn. I'm still a rookie at requirejs but it would seem to me that the path should be defined before any of the other requests are fired, can somebody please help me understand what I'm doing wrong?
I think this could be due to using the data-main attribute on the RequireJS script tag; for that to be parsed, RequireJS itself has to load and parse. In my testing (specifically for IE9), the browser would download and execute any script tags directly following the RequireJS script tag before parsing the RequireJS config file (the one specified by the data-main attribute).
To get around this, I simply quit using the data-main attribute and instead placed the config file as a normal script tag directly after the RequireJS script tag, and everything seems to be happy now.
Specifically, this is what it looks like (using your sample):
<script src="/javascript/require-2.0.1.js"></script>
<script src="/javascript/main.js"></script>
Maybe you put the config statement before require js being loaded.
You should load require.js first, put your config code after, then call require(['jquery'], ...);
The reason it searches /javascript/ is because your require.js file is located there and it is the default base url.
Your config may never be used by require.js.
See this tutorial about require config.
You have to rename define to require
require(['common'], function () {
loadFonts();
});
I'd recommend using map instead of paths to configure specific module locations.
paths is intended more for shortcuts/prefixs to simplify/configure includes, rather than full module paths.
Bear in mind: you'll need to place mappings you want to apply globally under an asterisk (*) key in the map object.
The reason is you put require(['jquery']... immediately after loading require.js module. As the result, it tries to load ['jquery'] before reading your config settings.
And why it tries to find jquery in /javascript/jquery.js? that is because of your data-main attribute.
RequireJS loads all code relative to a baseUrl. The baseUrl is
normally set to the same directory as the script used in a data-main
attribute for the top level script to load for a page.
This link clarifies require.js module loading procedure:
http://requirejs.org/docs/api.html#jsfiles
i think you can embed the full url in the require block. like:
require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'], function ($) {
//code
});
btw, your jquery link is invalid.