I am using Esri's ArcGis CDN and I want to have some custom modules. My directory structure is as follows
Scripts
app
basemap.js
test.js
Views
Maps
General.cshtml
In General.html I have this for my dojo config
<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
packages: [ {
name: 'app',
//Can't configure location correctly
location: location.pathname.replace(/\/[^/]+$/, '') + ''
} ]"
src="//js.arcgis.com/3.7/"></script>
Testing usage in test.js
require([
"dojo/ready",
"app/basemap"
], function (ready, basemap) {
basemap.test();
}
If I use an absolute path location: 'http://localhost:53862/Scripts/app' then it works fine.
I've tried a few other things for '' but I can't seem to navigate from the Maps folder across to my app folder. All the examples I looked at either specify a subdirectory for the location or an absolute path. Is there I way I can do something like ../Scripts/app?
I recommend you read "Configuring Dojo with dojoConfig" and "Using Custom Modules with a CDN".
Eg Google CDN.
dojo config, look at property baseUrl
<script data-dojo-config="async: 1,
dojoBlankHtmlUrl: '/blank.html',
baseUrl: '/Scripts',
packages:[
{ name:'dojo',location:'//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/'},
{ name:'app',location:location.pathname.replace(/\/[^/]+$/, '') + 'app'}]"
src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js">
</script>
after, test your custom module
require([
"dojo/ready",
"app/basemap"
], function (ready, basemap) {
basemap.test();
}
I changed my dojoconfig to the following
<script data-dojo-config="
packages: [ {
name: 'app',
location: '//' + window.location.host + '/Scripts/app'
} ]"
src="//js.arcgis.com/3.7/"></script>
Which set my app package to http://localhost:53862/Scripts/app
Related
So i never used requireJS before, but because Qlik Sense is using it for its mashups i had to try it one way or another.
I just made a simple bootstrap mashup, added the highcharts library and bought a bootstrap admin theme (name = Naut) on a theme website.
I moved everything i could use from the bought theme to the simple bootstrap mashup (css, html, js) and then i tried to modify the require.config
this is how my require.config file is looking at the moment.
Keep in mind that jQuery is default inside of the requireJS file (i think the developers of Qlik Sense have made it that way by default).
var config = {
host: window.location.hostname,
prefix: "/",
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources",
paths: {
bootstrap: "/extensions/fitcloud/js/vendor/bootstrap.min",
bootstrapSwitch: "/extensions/fitcloud/js/vendor/bootstrap-switch.min",
highcharts: "/extensions/fitcloud/js/vendor/highcharts",
senseutils: "/extensions/fitcloud/js/vendor/senseUtils",
treefy: "/extensions/fitcloud/js/vendor/bootstrap-treefy.min",
mainsc: "/extensions/fitcloud/js/main",
vendor: "/extensions/fitcloud/scripts/vendor",
plugins: "/extensions/fitcloud/scripts/plugins",
main: "/extensions/fitcloud/scripts/main"
},
shim: {
bootstrap : {
deps : ['jquery']
},
bootstrapSwitch : {
deps : ['jquery']
},
highcharts : {
deps : ['jquery'],
exports: 'Highcharts'
},
treefy : {
deps : ['jquery']
},
mainsc : {
deps : ['treefy']
},
senseutils : {
deps : ['bootstrap']
},
vendor : {
deps : ['jquery']
},
plugins : {
deps : ['vendor']
},
main : {
deps : ['plugins']
}
}
} );
require( ["js/qlik"], function ( qlik ) { qlik.setOnError( function ( error ) { alert( error.message ); } );
require(["jquery", "bootstrap", "bootstrapSwitch", "highcharts", "senseutils", "treefy", "mainsc", "vendor", "plugins", "main"], function (jq, bs, bss, hs, su, tf, ms, ve, pl, ma) {
var app = qlik.openApp('test.qvf', config);
// All the rest of my javascript code goes in here
});
The js files vendor, plugins & main are the javascript files from the theme i bought. When i put them into the require.config and require i start getting errors TypeError: $(...).highcharts is not a function & TypeError: $(...).bootstrapSwitch is not a function and my app is broken, no charts are loaded and bootstrapSwitch buttons are not working eather. If i remove them, everthing is working fine except i don't have the interactivity the theme is having ( closing sidebar, bouncing menu, ... ).
Am i doing anything wrong, or could it be that some function names are used in multiple libraries?
Your start of the extension should look like this (properties, qlik, jquery, always needed the js dependencies after that are optional but you will probably need
define(["./properties", "qlik","jquery","highcharts", "bootstrapSwitch"],
function(Props, qlik,$,highcharts,boostrapswitch) {
To explain, it first loads in the actual files with this part define(["./properties", "qlik","jquery","highcharts", "bootstrapSwitch"],
That is telling Qlik which JS files to bring in (you dont actually need to put.js after the files.
The error you describe happens when you are not properly passing the stuff inside these js files to the function. This is done in the second part..
function(Props, qlik,$,highcharts,boostrapswitch)
You see there are 5 params because you originally pass 5 js files.
You need to make sure they are in the same order for both parts.
Here is an example of a Qlik Sense extension, I recommend you examine the properties.js and the TalkToQlik.js to see how it should look.
https://github.com/cookiejest/TalkToQlik
Here is some instructions for that extension:
http://webofwork.com/qlik-sense-voice-control-extension-for-accessibility/
I added a new layer in dojo build config as below:
releaseDir: "./my-build",
layers: {
"myLib": {
include: [
"myFile1",
"myFile2"
]
}
}
After build, nls created under my-build folder, and include all locale files
my-build/
-myLib.js
-nls
--myLib_en-us.js
In the html file, my dojoConfig is:
var dojoConfig = {
async: true,
cacheBust: false,
paths: {
"ah": "/hm-webapp/resources/scripts/ah",
"i18n": '/hm-webapp/resources/i18n'
},
baseUrl: "/hm-webapp/resources/scripts/dojo/",
locale: ""
};
and I am including my layer via a script tag:
<script src="/my-build/myLib.js">
</script>
But there is a
404 error for myLib_en-us.js
It seems that dojo automatically load nls files, but the request path is like this
--/nls/myLib_en-us.js
There is no subpath "my-build" for the nls request.
My question is how to change the nls path to the build path.
Thanks.
I keep getting:
Uncaught TypeError: object is not a function
The first time:
<script>
require(['core/controller']);
</script>
The secondoccurrence is:
require.config({
paths: {
"jquery": [
"jquery"
],
'bootstrap': [
'bootstrap'
],
'kendo': [
'kendo'
],
handlebars: 'handlebars'
},
shim: {
"bootstrap": {
deps :["jquery"]
},
"kendo": {
deps: ["jquery"]
}
}
})
define('config', function (require) {
'use strict';
var module = require('module');
return module.config ? module.config() : {};
});
define('events', ['core/mini-events'], function(EventEmitter){
var events = new EventEmitter();
return events;
});
In my header I have:
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
The absolute URL that you mentioned in your script's src doesn't exist. As the host and the file do not exist, requirejs.js is not downloaded and any attempt to use require API will give you the error that you're getting now. As you're running this locally, I suggest you change your src like below
<script data-main="/js/main.js" src="/js/requirejs.js"></script>
As long as there's a js folder with requirejs.js file under your project root folder, then this change should work :)
[EDIT for clarity]
I tried the URL referenced in the script tag just now and it's not present. Check your debugger's Network console and you'll see the 404. Perhaps you meant:
http://requirejs.org/docs/release/2.1.16/minified/require.js
Struggling to set up RequireJS with KendoUI over CDN and can't get fallback to work.
... from amazing burkeholland A Kendo UI ASP.NET MVC SPA Template
This what I begin with :
define([
'../Scripts/kendo/2014.1.416/kendo.router.min',
'../Scripts/kendo/2014.1.416/kendo.view.min',
'../Scripts/kendo/2014.1.416/kendo.fx.min'
], function () {
return kendo;
})
and it works fine.
If kendo.core.min is not defined, first statement in kendo.router says define(["./kendo.core.min"] and it is loaded from proper location.
However, when I try to use CDN with fallback location like this :
requirejs.config({
paths: {
'router': ['//cdn.kendostatic.com/2014.1.416/js/kendo.router.min', '../Scripts/kendo/2014.1.416/kendo.router.min'],
'view': ['//cdn.kendostatic.com/2014.1.416/js/kendo.view.min', '../Scripts/kendo/2014.1.416/kendo.view.min'],
'fx': ['//cdn.kendostatic.com/2014.1.416/js/kendo.fx.min', '../Scripts/kendo/2014.1.416/kendo.fx.min']
}
});
define([
'router',
'view',
'fx'
], function () {
return kendo;
});
requireJS tries to load kendo.core.min from baseUrl location, not fallback location.
Am I missing something?
However, if I try something like this :
requirejs.config({
paths: {
k: ['//cdn.kendostatic.com/2014.1.416/js', '../Scripts/kendo/2014.1.416']
}
});
define([
'k/kendo.router.min',
'k/kendo.view.min',
'k/kendo.fx.min'
], function () {
return kendo;
})
Fallback doesn't work at all... what am I missing?
I am developing a set of modules for others to use using dojo 1.7. All modules are AMD modules and using relative paths within the package. My modules will need to be loaded cross domain, and not interfere with or care about the version of dojo running on the page consuming the modules (Let's assume someone is using. If I understand the documentation correctly, I can specify a packing remapping by doing something like this:
var dojoConfig = {
packages: [
{
name: "myDojo",
location: "path/to/my/dojo",
packageMap: {
dojo: "myDojo",
dijit: "myDijit",
dojox: "myDojox"
}
},
{
name: "myDijit",
location: "path/to/my/dijit",
packageMap: {
dojo: "myDojo"
}
},
{
name: "myDojox",
location: "path/to/my/dojox",
packageMap: {
dojo: "myDojo",
dijit: "myDijit",
dojox: "myDojox"
}
},
{
name: "myPackage",
location: "path/to/my/package",
packageMap: {
dojo: "myDojo",
dijit: "myDijit",
dojox: "myDojox"
}
}
]
}
Is there a way to burn the remapping into a dojo build so that using any module in my package will automatically use my dojo/dijit/dojox modules instead of the ones loaded in the local version of dojo? If so, what would the profile look like? If possible, I would like consumers to be able to do something like this:
<html>
<head>
<script src="some/differnt/version/of/dojo.js" type="text/javascript" data-dojo-config="config settings"></script>
<script type="text/javascript">
// For legacy syntax users:
dojo.registerModulePath("hisPackage", "http://somedomain.com/scripts/myPackage");
dojo.require("hisPackage.HisModule");
dojo.ready(function() {
// do stuff
});
// Or for AMD users:
require(["http://somedomain.com/scripts/myPackage/MyModule"], function(HisModule) {
// do stuff
}
</script>
</head>
<body></body>
</html>
Thanks in advance for any help.
Did you try this in your dojoConfig
var dojoConfig = { ...
packages: [
{name:'dojo',location:'//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/'},
{name:'dijit',location:'//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/'},
'dojotut'
]
...
}