I am using the following code Html to load the scripts that I need. I am getting $ as Undefined. It is not able to load the jquery.
How can I get this to work.
<html>
<head>
<title>Using The Text Plugin With RequireJS</title>
<script data-main="Scripts/init type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.6/require.min.js"></script>
<script type="text/javascript" language="javascript">
require(['jquery', 'knockout-2.2.1', 'Template', 'text!Template.htm'], function ($, ko, t, temp) {
$("body").append(temp);
//make this new template engine our default engine
ko.setTemplateEngine(t.myExternalTemplateEngine(t.templates));
ko.applyBindings(t);
});
</script>
</head>
code in Init.js in a separate file
require.config({
baseUrl:'Scripts',
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js',
'knockout-2.2.1': '//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js',
'knockout.mapping-latest': '//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js',
'Template': 'Template',
'text': '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.5/text',
'domready': '//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.js'
}
});
Remove the .js from your paths configuration:
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery'
}
More detail in this example repo
Related
I am trying to enable siunitx for a (hosted) talkyard side and by adding the following to the html header:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js","[siunitx]/siunitx.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions: ["AMSmath.js","AMSsymbols.js", "sinuitx.js"]}
});
MathJax.Ajax.config.path['siunitx'] = 'http://rawgit.com/burnpanck/MathJax-siunitx/master/';
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script>
talkyard.postElemPostProcessor = function(elem) {
console.log('Telling MathJax to post process elem: ' + elem);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
};
</script>
However rawgit seems to be down now and I didn't find another server for it. So how can I enable the siunitx extension on a hostet talkyard site?
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
I'm using a project that has 2 different files wrapped in AMD which one extends the other, project is jsondiffpatch.
The project has 2 files (build/bundle.js and build/formatters.js) each export jsondiffpatch. When I include them in my file like:
define(['jsondiffpatch',
'jsondiffpatch-formatters'], function (jsondiffpatch) {
});
the formatters extensions are not present. If I change the main config make jsondiffpath depend on the formatters like:
shim: {
'jsondiffpatch': {
deps: ['jsondiffpatch-formatters']
}
}
I still don't get the formatters. This is a pretty common practice, but haven't seen to overcome it; i know its something simple, what am i missing?
This should work:
shim: {
'jsondiffpatch-formatters': {
deps: ['jsondiffpatch'],
exports: 'jsondiffpatch.formatters'
},
'jsondiffpatch': {
exports: 'jsondiffpatch'
}
}
When you load jsondiffpatch with an AMD loader like RequireJS the formatters are a different module. In other words, it works slightly differently from when you load jsondiffpatch without an AMD-loader. Here's a complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/html.css" type="text/css" />
<link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/annotated.css" type="text/css" />
</head>
<script type="text/javascript" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<div id="visual"></div>
<hr/>
<div id="annotated"></div>
<script>
require.config({
baseUrl: ".",
paths: {
jsondiffpatch: "bower_components/jsondiffpatch/build/bundle",
"jsondiffpatch.formatters": "bower_components/jsondiffpatch/build/formatters"
},
enforceDefine: true
});
require(["jsondiffpatch", "jsondiffpatch.formatters"],
function (jsdp, formatters) {
//
// Code here adapted from jsondiffpatch's examples:
// https://github.com/benjamine/jsondiffpatch
//
var left = { a: 3, b: 4 };
var right = { a: 5, c: 9 };
var delta = jsdp.diff(left, right);
document.getElementById('visual').innerHTML =
formatters.html.format(delta, left);
document.getElementById('annotated').innerHTML =
formatters.annotated.format(delta, left);
});
</script>
</body>
</html>
The only thing you need other than this HTML above is to install RequireJS and jsondiffpatch with Bower.
I'm having some trouble figuring our why express is attaching every javascript file in my bower modules instead of just the ones I specify in the assets.json file. I get the feeling it's a daft mistake somewhere, I just don't understand where!
My assets file looks like so:
{
"css": {
"public/build/css/dist.min.css": [
"public/lib/angular-snap/angular-snap.min.css",
"public/lib/animate.css/animate.min.css",
"public/lib/bootstrap/dist/css/bootstrap.min.css",
"public/lib/font-awesome/css/font-awesome.min.css",
"public/lib/angular-toggle-switch/angular-toggle-switch.css",
"public/lib/intro.js/minified/introjs.min.css",
"public/lib/ng-table/ng-table.css",
"public/lib/leaflet-dist/leaflet.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.Default.css",
"public/css/common.css"
]
},
"js": {
"public/build/js/dist.min.js": [
"public/lib/angular/angular.min.js",
"public/lib/angular-bootstrap/ui-bootstrap.js",
"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
"public/lib/angular-cookies/angular-cookies.js",
"public/lib/angular-leaflet-directive/dist/angular-leaflet-directive.js",
"public/lib/angular-resource/angular-resource.js",
"public/lib/angular-route/angular-route.js",
"public/lib/angular-sanitize/angular-sanitize.js",
"public/lib/angular-snap/angular-snap.min.js",
"public/lib/angular-toggle-switch/angular-toggle-switch.js",
"public/lib/angular-ui-utils/ui-utils.min.js",
"public/lib/d3/d3.min.js",
"public/lib/highcharts-ng/dist/highcharts-ng.min.js",
"public/lib/intro.js/minified/intro.min.js",
"public/lib/leaflet-dist/leaflet.js",
"public/lib/leaflet-plugins/layer/tile/Google.js",
"public/lib/leaflet.markerclusterer/dist/leaflet.markercluster.js",
"public/lib/modernizr/modernizr.js",
"public/lib/momentjs/min/moment.min.js",
"public/lib/ng-table/ng-table.js",
"public/lib/snapjs/snap.min.js",
"public/lib/typeahead.js/dist/typeahead.bundle.min.js",
"public/lib/underscore/underscore-min.js",
"public/lib/underscore.string/dist/underscore.string.min.js",
"public/*/*.js",
"public/*/*/*.js"
]
}
}
I create an assets variable in express.js here:
// Import your asset file
var assets = require('./assets.json');
assetmanager.init({
js: assets.js,
css: assets.css,
debug: (process.env.NODE_ENV !== 'production'),
webroot: 'public'
});
And finally add these to my view using an each loop in my jade template
- each file in assets.js
script(type='text/javascript' src=file)
What I'm expecting to happen is that all the scripts I've listed in assets.json be added to my template. Instead it seems to include all .js files under public/lib - which as you can imagine causes some unusual results.
A sample of which is here
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/animate.css/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/d3/d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/karma.conf.js"></script>
<script type="text/javascript" src="/lib/intro.js/intro.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
Turns out it was a daft mistake. The last two rules in my assets file included the lib folder because of the asterisks.
I have a simple ExtJS4 MVC test application started with:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/CheckHeader.css">
<script type="text/javascript" src="/Test/extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="/Test/ajax/api-debug.js?apiNs=MyNamespac"></script>
<script type="text/javascript" src="/Test/app.js"></script>
</head>
<body><div id="viewport"></div></body>
</html>
And here is the actual app.js code (i've copied the CheckColumn.js file to extjs-4.1.0\src):
Ext.Loader.setConfig({ enabled: true });
Ext.require([ 'Ext.ux.CheckColumn' ]);
Ext.direct.Manager.addProvider(MyNamespace.REMOTING_API);
Ext.application({
name : 'Auctions',
controllers : [ 'TestDates' ],
appFolder : '/Test/app',
launch : function() {
Ext.create('Ext.Panel', {
layout : 'fit',
items : [ {
xtype : 'testdates'
} ],
renderTo : 'viewport',
});
}
});
I had to include the Loader, otherwise the app complained it cannot load the controller. I also had to require the CheckColumn, otherwise the checkcolumn xtype was not recognized.
I am not getting the following error:
The following classes are not declared even if their files have been
loaded: 'Ext.ux.CheckColumn'. Please check the source code of their
corresponding files for possible typos: './ux/CheckColumn.js
You should create folder ux under extjs-4.1.0\src and copy CheckColumn.js file there. There is always a link in ExtJs between class name and location of the file. If you class name is Ext.ux.CheckColumn then path must be .\src\ux\CheckColumn.js