TypeError: this.functionName is not a function at HTMLSelectElement.<anonymous>

[NadirHussain]

Dear All

 i am calling the function _getAllFields().In startup it works but if i call this function on change event of selection box this through fallowing error.please help.

TypeError: this._getAllFields is not a function
at HTMLSelectElement.<anonymous>

startup: function() {
this.inherited(arguments);
this._getAllFields("Hello");------>this line function calling works.

$(document).on('change', '.form-control', function() {
if(this.id=="lyrSource"){
this._getAllFields(this.id);--------------------->through Error TypeError: this._getAllFields is not a function at HTMLSelectElement.<anonymous>

}//end of if

},//End of startup

_getAllFields:function(strLayerName){
alert(strLayerName);
},

[RobertScheitlin__GISP · Accepted solution]

Nadir,

   Your issue is that the scope of "this" inside the change event of select is the select not the widget as you need it to be to get to your _getAllFields function. I don't understand why people are using jQuery in their widgets when you already have dojo as part of the JS API. Your code for getting the select (and whatever else you are using jQuery for) can easily be done in dojo with out adding another heavy third party library.

define([
...
'dojo/query',
'dojo/on',
...

on(query('.form-control')[0], 'change', lang.hitch(this, function(){
  //Now "this" is the widgets scope and you can get to your function.
}));‍‍‍‍‍‍‍‍‍‍‍‍

Better yet have the select element with a data-dojo-attach-point="mySelect" in the html code and then you can have simple code like this instead.

this.mySelect.on('change', lang.hitch(this, function(){
  //Now "this" is the widgets scope and you can get to your function.
}));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now there is no need for the dojo/query or dojo/on modules.

[NadirHussain]

Dear Robert

 As per your suggestion  i changed the code from jquery to dojo.But still drop down change event not working.

   <div >
<label class="width70" for="SourceCombo" style="margin-top:-20px">Source Layer:</label>
<div data-dojo-attach-point="SourceCombo" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="searchAttr:'Title',intermediateChanges:true,placeHolder: 'Select Source Layer'" class="dijit-form-FilteringSelect" style="width: 360px;height:30x;margin-Left: 10px;margin-top:-10px"></div>
</div>

var layerInfoArray=[];
var lyrArray=[];
if (this.map.itemId) {
LayerInfos.getInstance(this.map, this.map.itemInfo)
.then(lang.hitch(this, function(operLayerInfos) {
this.operLayerInfos = operLayerInfos;
}));
}
this.operLayerInfos.traversal(lang.hitch(this, function(layerInfo) {
layerInfoArray.push(layerInfo);
}));
for(var k=1;k<layerInfoArray.length;k++)
{
lyrArray.push({"ID":layerInfoArray.id,"Title":layerInfoArray.title});
}
var myStore = new Memory({data: lyrArray});
this.SourceCombo.set('store', myStore);
this.SourceCombo.on('change', lang.hitch(this, function(){  ----->function change event not working and there is no error on console
console.log("Hello");-
}));

All the code is in startup function.please help.

[RobertScheitlin__GISP]

Nadir,

   The filteringselect is a strange dijit that does not fire the change event when a dropdown item is selected from the list. Instead use:

this.SourceCombo.watch('displayedValue', function(property, oldValue, newValue) {
  console.log("Hello");
}));‍‍‍