topic TypeError: this.functionName is not a function at HTMLSelectElement.<anonymous> in ArcGIS Web AppBuilder Questions

TypeError: this.functionName is not a function at HTMLSelectElement.

NadirHussain — Thu, 07 Feb 2019 11:41:33 GMT

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);
},

Re: TypeError: this.functionName is not a function at HTMLSelectElement.

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:26:00 GMT

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.

Re: TypeError: this.functionName is not a function at HTMLSelectElement.

NadirHussain — Sat, 09 Feb 2019 00:33:14 GMT

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>

All the code is in startup function.please help.

Re: TypeError: this.functionName is not a function at HTMLSelectElement.

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:26:02 GMT

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");
}));‍‍‍