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.
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 currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
I just want to ask how to use the jquery custom builder since i separate the folder of jquery custom builder to the Login Folder. Here is the folder path for the jquery custom builder
And here is for the Login Folder
I have tried this kind of syntax for getting the Directory of the js file and to other files to but it doesn't seems to work.
<script src = "../htdocs/WebSite/jslib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
i hope you can help me with this since i'm just starting jquery i also read the guide for using jquery i follow the instruction but it's still the same.
Thanks
Where is the html file that imports jquery script tag? It seems like just path problem. Usually, URI paths are based on app server root. There are so many ways managing URI, but XAMPP might let file resource paths show up same as URI paths.
When app server root is located on c:/foo/bar/:
c:/foo/bar/lib/jquery.js -> http://localhost:xxxx/lib/jquery.js
c:/foo/bar/index.html -> http://localhost:xxxx/index.html
So in index.html, import resource as this way.
<script src="lib/jquery.js"></script>
when I put goog.require in to a HTML file..
base.js file definitely write script tag like
<script type="text/javascript" src="{{STATIC-FILE}}closure-library/closure/goog/dom/dom.js"></script>
However, when I put a dependency file generated by depswriter.py..
it does not put any file required by other files.
so.. my question is..
what's the difference between goog.require and goog.addDependency?
can goog.addDependency replace goog.require? I mean, without any goog.require sentences, goog.addDependency can serve as goog.require?
please help me.. I spent more than 4 hours figuring out why the hell goog.addDependency does not incorporate dependency files into a HTML file and failed!!!..
goog.require:
Implements a system for the dynamic resolution of dependencies that works in parallel with the BUILD system.
goog.addDependency
Adds a dependency from a file to the files it requires.
You don't have to use goog.addDependency. It's only used by the dependency generator scripts. You need to put deps.js in the same directory than base.js. Then put a script tag for loading base.js in your head section, followed by a script tag with your requires. Like that:
<script src="../base.js"></script>
<script>
goog.require('goog.events.EventType');
goog.require('goog.ui.AdvancedTooltip');
</script>
Have a look at the Closure demo: http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/index.html