Attempting to build a new widget and having difficulty acquiring the value found in a textbox control in the widget.html and getting the error: "this.<name>.get is not a function". Hopefully I'm just missing the obvious. And thanks to Robert and this group for the jumpstart!
Widget.html (line 5 has the appNoInput reference I'm trying to get the value from)
<div>
<div data-dojo-attach-point="tabIdentify">
<div class="my-tab-node" data-dojo-attach-point="tabNode1">
<div class="main-div" data-dojo-attach-point='mainDiv'>
<label for="${id}_appNoInput">App No: </label><input type="text" class="appNoBox" id="${id}_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress" />
<br/><br/>
<div class="jimu-btn" data-dojo-attach-point="queryButton" data-dojo-attach-event="click:_onQueryAppNo">Query App No.</div>
<br/><br/>
....and so forth
Widget.js
var appNo = this.appNoInput.get("value");
//generates the error "this.appNoInput.get is not a function"
Solved! Go to Solution.
James,
So here is your Widget.js working now. Sometimes very simple things that are not obvious can get you and your case was the BaseWidget has to be listed before _WidgetsInTemplateMixin in the declare array:
define(['dojo/_base/declare',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'jimu/dijit/TabContainer',
'jimu/utils',
'dojo/_base/lang',
'dojo/on',
'dojo/Deferred',
'dojo/_base/Color',
'dojo/_base/array',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/keys',
'dijit/form/ValidationTextBox',
'esri/tasks/query',
'esri/tasks/QueryTask'
],
function(declare,
_WidgetsInTemplateMixin,
BaseWidget,
TabContainer,
utils,
lang,
on,
Deferred,
Color,
array,
domConstruct,
domClass,
keys,
ValidationTextBox,
Query,
QueryTask
) {
return declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: "jimu-widget-customwidget",
startup: function() {
window.map = this.map;
window.widget = this;
this.inherited(arguments);
this.lookupLayerUrl = this.config.lookupLayerUrl;
this.queryTask = new QueryTask(this.lookupLayerUrl + "/1");
},
postCreate: function() {
this._initTabContainer();
},
_initTabContainer: function() {
var tabs = [];
tabs.push({
title: 'Tab 1',
content: this.tabNode1
});
tabs.push({
title: 'Tab2',
content: this.tabNode2
});
this.selTab = 'Tab 1';
this.tabContainer = new TabContainer({
tabs: tabs,
selected: this.selTab
}, this.tabIdentify);
this.tabContainer.startup();
this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function(title) {
if(title !== 'Tab 1') {
//do something now that Tab 2 has been selected
}
})));
utils.setVerticalCenter(this.tabContainer.domNode);
},
onReceiveData: function(name, widgetId, data /*,historyData*/ ) {
if(name !== "eSearch") {
// We only care about messages from the
// search widget.
console.log('no esearch widget');
return;
}
console.log('onReceiveData fx')
console.log('data.item.title: ', data.item.title)
this.appNoInput.set("value", data.item.title);
},
_onSearchKeyPress: function(evt) {
// summary:
// If the enter key is pressed, query for the app id.
if(evt.charOrCode === keys.ENTER) {
lang.hitch(this, this._onQueryAppNo());
}
},
_onQueryAppNo: function() {
var appNo = this.appNoInput.get("value");
console.log('_onQueryAppNo value: ', appNo);
var query = new Query();
query.where = "APP_NO = '" + appNo + "'";
query.outFields = ["*"];
this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},
resetForm: function() {
this.mainForm.style.display = "none";
}
});
});
James,
Do you have "dijit/form/ValidationTextBox" in your Widget.js define array?
Yes!
(this also made me go look/check and is helping me understand the various things I need to consider -- thanks!!!)
define(['dojo/_base/declare',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'jimu/dijit/TabContainer',
'jimu/utils',
'dojo/_base/lang',
'dojo/on',
'dojo/Deferred',
'dojo/_base/Color',
'dojo/_base/array',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/keys',
'jimu/dijit/LoadingIndicator',
'jimu/dijit/Popup',
'dijit/form/ValidationTextBox',
...
function(declare,
_WidgetsInTemplateMixin,
BaseWidget,
TabContainer,
utils,
lang,
on,
Deferred,
Color,
array,
domConstruct,
domClass,
keys,
LoadingIndicator,
Popup,
ValidationTextBox,
...
James,
Can I see the whole function that this code is in:
var appNo = this.appNoInput.get("value");
_onQueryAppNo: function() {
// summary:
// When an application is queried via the widget,
// this function begins look up tasks.
this.resetForm();
var appNo = this.appNoInput.get("value"); //error occurs here
console.log("appNo: ", appNo)
var query = new Query();
query.where = "APP_NO = '" + appNo + "'";
query.outFields = ["*"];
this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},
James,
The scope of the function that your in there is different from the outer scope of it's parent function. So you use lang.hitch to maintain the scope:
_onSearchKeyPress: function(evt){
// summary:
// If the enter key is pressed, query for the app id.
if (evt.charOrCode === keys.ENTER){
lang.hitch(this, this._onQueryAppNo());
}
},
_onQueryAppNo: function() {
// summary:
// When an application is queried via the widget,
// this function begins look up tasks.
this.resetForm();
var appNo = this.appNoInput.get("value"); //error occurs here
console.log("appNo: ", appNo)
var query = new Query();
query.where = "APP_NO = '" + appNo + "'";
query.outFields = ["*"];
this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},
James,
Sorry look at my updated code above. I was try to do to many things at the same time when I posted that.
Thank you! I'll take a stab at this shortly.
Just reducing it down to the couple of functions I'm having issues with...
_onSearchKeyPress: function(evt){
// summary:
// If the enter key is pressed, query for the app id.
if (evt.charOrCode === keys.ENTER){
lang.hitch(this, this._onQueryAppNo());
}
},
_onQueryAppNo: function() {
// summary:
// When an application is queried via the widget,
// this function begins look up tasks.
this.resetForm();
//var appNo = this._getAppNo();
var appNo = lang.hitch(this, this._getAppNo());
console.log('_onQueryAppNo value: ', appNo);
var query = new Query();
query.where = "APP_NO = '" + appNo + "'";
query.outFields = ["*"];
this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},
_getAppNo: function() {
// summary:
// Parse the current form application number.
//this.appNoDiv.innerHTML = this.currentFeature.APP_NO
return this.appNoInput.get("value").trim();
},
When looking at console.log('_onQueryAppNo value: ', appNo); it basically prints out the entire html for that control -- this is what shows in the dev tools log:
For the line in the widget.js
console.log('_onQueryAppNo value: ', appNo);
This is the log prints in Chrome dev tools console:
<input type="text" class="appN<input type="text" class="appNoBox" id="widgets_blah_Widget_36_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress">oBox" id="widgets_RegExhibits_Widget_36_appNoInput" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-attach-point="appNoInput" data-dojo-attach-event="keypress:_onSearchKeyPress">
James,
I see not need for the _getAppNo function.
_onQueryAppNo: function() {
// summary:
// When an application is queried via the widget,
// this function begins look up tasks.
this.resetForm();
var appNo = this.appNoInput.get("value");
console.log('_onQueryAppNo value: ', appNo);
var query = new Query();
query.where = "APP_NO = '" + appNo + "'";
query.outFields = ["*"];
this.queryTask.execute(query).then(lang.hitch(this, this._populateForm));
},