I use a lot of script in an application, some of them are not required to load the application, I want to load them just before their use if possible, knowing that my application is coded in ExtJS, and uses many ajax calls
You could look at using LABjs which is a script loader.
Old and busted:
<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>
New hotness:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js").wait();
</script>
Update:
If you want to load jQuery you could do something like this from this blog post.
<script type="text/javascript" src="LAB.js">
if (typeof window.jQuery === "undefined") {
$LAB.script("/local/jquery-1.4.min.js");
}
You can load an external file using javascript only when/where you need it:
function LoadJs(url){
var js = document.createElement('script');
js.type = "text/javascript";
js.src = url;
document.body.appendChild(js);
}
LoadJs("/path/to/your/file.js");
Here's a great post on the topic with a proposed solution you might want to check out: http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/
Related
I am using React-Router-Dom-6. my public folder structures are:
I have some external javascript libraries for template design in the main public and my index.html is:
<!--=============== scripts ===============-->
<script src="%PUBLIC_URL%/assets/js/jquery.min.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/plugins.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.js" type="text/babel"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
above javascript files are working or loading on the first page when the application gets started. But these libraries are not working when redirecting to another page. at that time route changed but the js files are not loading. I tried many ways but couldn't get the solution. I am using react-router-dom v6 for routing.
You should make use of them in the App.js component, call them with useEffect hook before your render method... this process should work on every route changed
for example:
useEffect(() => {
const script = document.createElement("script");
script.src = "/path/to/jquery.js";
script.async = true;
document.body.appendChild(script);
},[])
or this link should do
https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
I wish to inject two dependences in my module, but angular not accepts this very well , someone can help-me? i´m beginner in angular.
var app = angular.module('aplication', ['infinite-scroll','ngAnimate']);
sequence of scripts.
error:
Make sure you have loaded the references,
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="app.js"></script>
<script src="infinite-scroll.js"></script>
And then,
app = angular.module('application', ['ngAnimate', 'infiniteScroll']);
Demo
I've changed my script to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
and works fine!
Hi I am struggling through working with backbone routers, and I am wanting to find out about instantiating routers.
Can I have one routers file in my app where all the routes are defined, but I make an instance of the router in my appView and in my appModel. I am doing this so that I can call the router from both the view and the model, however I feel that this might be a rather sloppy way to do this?
Is there a better way?
The best way to handle this that has worked for me in the past is to create a global javascript file that is included on every page:
<script type="text/javascript" charset="utf-8">
window.APP = {};
APP.Routers = {};
</script>
Render the router once on page load:
APP.Routers['my_router_name'] = new MyRouterName({});
Now you can access it anyplace throughout the app by
APP.Routers.my_router_name
I tend to follow this pattern with not only routers, but also we collections, models, etc. also.
<script type="text/javascript" charset="utf-8">
window.APP = {};
APP.Routers = {};
APP.Collections = {};
APP.Models = {};
</script>
This solves the problem you have stated here it seems...."I am doing this so that I can call the router from both the view and the model".
I'm learning Backbonejs and I'm really confused with linking external JS files. So, if I write Backbone script in HTML document between everything works fine. But if I add a link in HTML to JS file it doesn't work. I have tested jQuery in this file and it works fine, it seems like only Backbone.js scripts doesn't work. So, the main question is:
How do I link external JS files where I'm using Backbone.js to my HTML file?
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="testingscript.js"></script>
<title>Backbone for beginners</title>
</head>
<body>
<div id="container">Loading...</div>
<script>
var AppView = Backbone.View.extend({
el: $('#container'),
// template which has the placeholder 'who' to be substitute later
template: _.template('<h3>Hello <%= who %></h3>'),
initialize: function () {
this.render();
},
render: function () {
// render the function using substituting the varibile 'who' for 'world'
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView ();
</script>
</body>
</html>
Greetings!
There is no special magic to load other js files in the same HTML file that backbonejs is used.
I would make sure that your 'testingscript.js' file is in the right path and get loaded properly. You can look at the console in your web-browser (From FireBug if you use fireFox, or 'Inspect Element' if Chome is used).
Once you confirm that the file is loaded properly, things should work as I don't see you have any unusual in your code.
Good luck!
<script src="testingscript.js"></script>
Is there default way to apply localization packet globaly to all Application from /extjs/locale/ in ExtJS 4.1 MVC?
Maybe some Ext.Application or Ext.Loader metods/properties?
I don't think so.
You have to load the appropriate file in extjs/locale/
For example(tomcat server),
in index.jsp
You can do something like
<script type="text/javascript" src="extjs/locale/ext-lang-<%=language %>.js"></script>
(You can also load locale file dynamically via JS)
To localizate Built-in Ext JS component, add the following code your app.js:
launch: function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "extjs/locale/ext-lang-" + navigator.language;
head.appendChild(script);
}
To localizate custom Ext JS component, use Locale.js.
We have used it in two Ext JS projects. Pretty simple.