dojo nested Custom Widget undefined not a function - dojo

I've a Widget called stat.widget.Weekly that is a _Container and it require's stat.widget.Daily as Daily But Whenever I use new Daily() I get
Uncaught TypeError: undefined is not a function
My Code goes like this
require([
"dojo/_base/declare", "dojo/parser", ..., "stat/widget/Daily", "dijit/_Container"
], function(declare, ... , _WidgetBase, _TemplatedMixin, Daily, _Container){
declare("stat.widget.Weekly", [_WidgetBase, _TemplatedMixin, _Container], {
....
update: function(){
new Daily();//< Fires Error
},
postCreate: function(){
var self = this;
setTimeout(function(){
self.update();
}, 500);
}
});
});
But this stat/widget/Daily can be be instantiated in console with new

If your stat.widget.Weekly is placed in a file under stat-Modulepath/widget/Daily.js, this syntax would be more smooth to process in the classloader:
define([ // using define instead of require
"dojo/_base/declare", "dojo/parser", ..., "stat/widget/Daily", "dijit/_Container"
], function(declare, ... , _WidgetBase, _TemplatedMixin, Daily, _Container){
var myPrivates = declare("stat.widget._WeeklyResource", [], {
...
});
var myDefinition = declare("stat.widget.Weekly", [_WidgetBase, _TemplatedMixin, _Container], {
...
});
// returning the definition
return myDefinition;
});

Related

JavaScript - Add Graphics to an existing Arcgis map

I have an ArcGis map created using following code. I have a button on the page which is supposed to add graphics to the map on click. But it throws a JavaScript error "Error: Tried to register widget with id==xxx but that id is already registered". Any clue is welcome.
<script>
var map;
require([
"esri/map",
// Map initialization code....
});
function addSecond() {
//add pre-defined geometries to map
var polygonSymbol = new SimpleFillSymbol();
var triangle = new Polygon({
"rings": [
[
[2426417, 8535508],
[4304933, 12292541],
[6183449, 8535508],
[2426417, 8535508]
]
],
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(triangle, polygonSymbol));
}
</script>
Jsfiddle - http://jsfiddle.net/L1peybqh/
The root problem as I mentioned in the question was, I should be able to add graphics to the map on click of a button. I was implementing the ArcGIS API incorrectly, I was supposed to add the event listener inside the required function. A simplified version of the code I ended up looked like this.
<script>
var map, editToolbar;
var mapObj;
require([
"esri/map",
"esri/toolbars/edit",
"esri/graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/_base/event",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/Menu",
"dijit/form/ToggleButton",
"dijit/form/DropDownButton",
"dijit/CheckedMenuItem",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, Edit, Graphic,
Point, Polyline, Polygon,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
event, parser, dom, domStyle, registry, Menu
) {
parser.parse();
domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});
map.on("load", createToolbar);
function addGraphics() {
//add pre-defined geometries to map
var polygonSymbol = new SimpleFillSymbol();
var polygon = new Polygon({
"rings": [
[
[-4226661, 8496372],
[-3835304, 8731187],
[-2269873, 9005137],
[-1213208, 8613780]
]
],
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(polygon, polygonSymbol));
}
function addSecond() {
var polygonSymbol = new SimpleFillSymbol();
console.log(mapObj.features[0].geometry.coordinates);
var triangle = new Polygon({
"rings":
mapObj.features[0].geometry.coordinates
,
"spatialReference": {
"wkid": 102100
}
});
map.graphics.add(new Graphic(triangle, polygonSymbol));
}
$('#x').click(function(){
addSecond();
});
});
</script>

dojo Cannot set property 'id' of undefined

I am making a dynamic GridContainer. However, an error occurred. console.log output a correct value is outputted. However, the execution error. i don't understand this situation.
my code.
define([ "dojo/parser", "dojo/dom", "dojo/dom-style",
"dijit/registry","dojo/on", "dojo/request", "dojo/dom-construct","dojo/json",
"dojo/_base/array", "dijit/Dialog","dijit/focus" ,"dijit/form/Button","dijit/form/Select","dijit/form/TextBox",
"dijit/form/CheckBox", "dojo/query","dojox/layout/GridContainer","dojox/widget/Portlet","dijit/layout/BorderContainer",
"dijit/layout/TabContainer", "dijit/layout/ContentPane"], function(parser, dom, domStyle,
registry,on, request, domConstruct,json, arrayUtil, Dialog,focus,Button, CheckBox,query,GridContainer,Portlet) {
function addTab(formCount,num){//make gridContainer ajax
var xhrArgs = {
url: '/checkData',
handleAs: "json",
content:{
seq:num
},
load:function(data){
var cont='';
++gridCounter;
cont+='<div dojoType="dojox.layout.GridContainer" class="test" doLayout="true" id="gc'+gridCounter+'" region="center" hasResizableColumns="false" opacity="0.3" nbZones="1" allowAutoScroll="false" withHandles="true" dragHandleClass="dijitTitlePaneTitle" minChildWidth="200" minColWidth="10" style="height:50%;">';
..........
}
}
function addGridContainer(id){
alert('vidgetAddgridNo:'+id);
var result='';
var xhrArgs = {
url: '/checkVidget',
handleAs: "json",
content:{
id:id
},
load: function(data){
++addPorNum;
result+=data;
var portletContent2 = [
domConstruct.create('div', {innerHTML: result})
];
var portlet2 = Portlet({
id: 'dynPortlet'+addPorNum,
closable: false,
title: ''+result,
content: portletContent2
});
makeGrid(portlet2);
}
}//end xhrArgs
var deferred = dojo.xhrGet(xhrArgs);
function makeGrid(por){
console.log('makeGrid in');
var selectedTab=registry.byId('tabContainer').get('selectedChildWidget');
var tabs=registry.byId("tabContainer");
var cPane=tabs.get("selectedChildWidget");
var grid=cPane.getChildren()[0];
var id=grid.id;
alert(registry.byId(id));=>[Widget dojox.layout.GridContainer,gc1]
registry.byId(id).addChild(por,0,0);=>Error:Cannot set property 'id' of undefined
}//end makeGrid()
}
plz help me..T.T
In your define() module list you defined the following modules:
"dijit/form/Button", "dijit/form/Select", "dijit/form/TextBox",
"dijit/form/CheckBox"
However, in your callback you only have:
Button, CheckBox
So, you're missing the Select and TextBox module here, meaning that the parameter CheckBox actually contains the module dijit/form/Select. Which means every module is shifted and none of them contain the actual value, try fixing that first.

Dojo AMD module changes reference of "this"

I'm really confused as to some behavior I'm seeing in trying to learn the AMD style of Dojo. When I instantiate my module/object, "this" refers to the object in my constructor. I make a call to an internal function, and "this" inside that internal function refers to the Window object. So when I get to this.attachMapEventHandlers I get a "Object [object global] has no method 'attachMapEventHandlers'" error. What am I doing wrong? UPDATE: I found lang.hitch, which seems to indicate that the async nature is what's tripping me up, but I'm confused on how to implement a solution.
my script inside index.html:
require(["javascript/layout", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/layout/AccordionContainer",
"dojo/dom", "dojo/dom-attr", "dijit/Toolbar", "dijit/form/Button", "dijit/Dialog","dijit/ProgressBar", "dojo/domReady!"],
function (layout, dom, domAttr) {
mapControl = new layout();
layout.js:
define(["dojo/_base/declare"], function(declare) {
return declare(null, {
action:"pan",
activeMeasureTool:"",
aerialLayer:"",
legendLayers:"",
loadedServices:"",
popup:"",
resizeId:0,
constructor: function() {
this.init();
},
init: function() {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {extent: startExtent, isZoomSlider:true, logo:false, sliderStyle:"large"});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
});
},
There are a couple of things that you could do to resolve this.
Firstly, you could add your required dependency to the define array so you don't need to do an asynchronous require within the constructor of the class.
That would look like:
define(["dojo/_base/declare", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], function (declare, Map, config, SpatialReference, Extent) {
return declare(null, {
action: "pan",
activeMeasureTool: "",
aerialLayer: "",
legendLayers: "",
loadedServices: "",
popup: "",
resizeId: 0,
constructor: function () {
this.init();
},
init: function () {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
}
});
});
OR you could save the current scope of this to something in the closure when doing the require
init: function () {
var that = this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function (Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
that.attachMapEventHandlers();
that.createLayers();
that.handleLayerVisibilityChange();
});
},
EDIT: your third option would be using lang.hitch, which lets you specify the scope of this in the the callback function. To use it, you would add dojo/_base/lang to you define() dependency list, and wrap the require callback in lang.hitch(this, function(){});
define(["dojo/_base/declare", "dojo/_base/lang"], function (declare, lang) {
return declare(null, {
//...
init: function () {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
lang.hitch(this, function (Map, config, SpatialReference, Extent) {
//this now refers to the instance of the class
}));
}
});
});
I would strongly suggest going with the first option, since it is consistent with the entire use of AMD (declaring what dependencies a module needs before it executes, rather than loading it on the fly).
You can put 'this' in another variable, like _this, and use _this in your internal function,like
init: function() {
var _this= this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
...
_this.attachMapEventHandlers();
_this.createLayers();
_this.handleLayerVisibilityChange();

Widgets inside Dojo dgrid OnDemandList

I'm trying to do something similar to this question but using an OnDemandList instead of an OnDemandGrid.
Here is what I have so far
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dgrid/OnDemandList",
"widget/CategoryItem",
"dojo/dom-construct",
"dojo/text!./templates/category-list.html"
], function(declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, OnDemandList, CategoryItem, domConstruct, template) {
var CatList = declare([OnDemandList]);
return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
baseClass: "category-list",
postCreate: function() {
this.inherited(arguments);
// Create OnDemandList, place in div defined in template.
var cat1 = this.cat1 = new CatList({
store: this.store,
renderRow: this.renderItem
}, this.categoriesLevel0);
},
renderItem: function(item) {
return new CategoryItem({
title: item.title
});
}
});
});
The problem is my renderItems function needs to somehow return a dom containing my custom widget. As it is now I get this error Error on domReady callback: Error: NotFoundError: DOM Exception 8
Yeah it definitely needs to return a dom node from renderRow. Assuming you're using _WidgetBase for CategoryItem it should work like:
renderItem: function(item) {
var category = new CategoryItem({
title: item.title
});
return category.domNode;
}
The example here: https://github.com/SitePen/dgrid/wiki/OnDemandList-and-OnDemandGrid does pretty much the same thing, except it uses put-selector, which is just constructing a div, attaching the widget to it and returning the new div.

Loading module variables in Dojo?

I'm new to dojo and can't figure out why this is happening
in dojo.html:
require(["dojo/query", "dojo/NodeList-dom", "dojo/domReady!", "a" ], function(query, a) {
query("#greeting").style("color", "red");
alert(a.sheep);
});
in a.js
define([], function() {
var a = {
"sheep": "blah",
}
return a;
});
Requiring and loading module a is fine, but when I try to alert a.sheep, I get undefined.
Note: I've also tried declaring sheep : "blah" as well and try changing sheep to an alert function and running a.sheep; which worked.
the reason you cannot access a.sheep is that there is dojo/NodeList-dom module in a variable. The order of elements in define/require array is bind to the list of arguments in the subsequent function. So you should write:
require(["dojo/query", "a", "dojo/NodeList-dom", "dojo/domReady!"], function(query, a) {
})
Also from the practical point of view I happen to format my code like this:
define([
"dojo/_base/declare",
"dojo/query",
"a",
"dojo/NodeList-dom",
"dojo/domReady!"
],
function(
declare
query,
a
){
return declare(null, {
constructor: function() {}
});
});
Every module on his own line, plus logical clustering of modules via empty lines.