topic Re: onchange events and dojo TextBox confusion in ArcGIS Web AppBuilder Questions

onchange events and dojo TextBox confusion

FranklinAlexander — Sat, 11 Dec 2021 06:48:52 GMT

The first question I have is: does 'onchange' attribure work with a dojo dijit/form/TextBox? If not, is 'intermediateChanges:true' the replacement, and if so, how do I connect it to my function? I can't seem to get 'onchange' to work, and I can't seem to find much info by googling 'intermediateChanges'.

<input data-dojo-attach-point="stringTextBox" type="text" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true, intermediateChanges:true"
style="display:block;width:100%;height:30px;" class="dijit-form-TextBox" >‍‍‍‍‍‍

I am using the eSearch widget in an app built using WAB v2.8. I have an input element( that is a dropdown menu which selects from predefined values) and I want the 'search' function to execute on input change. The html for the input tag is in the SingleParameter.html file and the 'Search' function I want to execute is in the Widget.js file. I set the intermediateChanges:true property in the input tag, but there must be something else I have to do to get it to work. I think I have to use something like this:

on(stringTextBox, "change", lang.hitch(this, this.Search));‍‍‍‍

but I am not sure where to drop this in the widget.js file. Also, I am not sure how to access the input element's attach point since it is in the SingleParameter.html file, not the Widget.html file. I know I am probable making it more difficult that it should be, but any help/suggestions would be greatly appreciated.

Thanks!

Re: onchange events and dojo TextBox confusion

RobertScheitlin__GISP — Tue, 19 Jun 2018 16:33:25 GMT

Franklin,

So it this an existing control in the eSearch or it it a new control you are adding. You mention textBox but then you say it is a drop down menu (which would be a Select or FilteringSelect)...

Re: onchange events and dojo TextBox confusion

FranklinAlexander — Sat, 11 Dec 2021 06:48:54 GMT

The markup is pretty much out of the box, I do as much configuring as possible in developer mode, then export the app to our server. After your reply, I trying something and I think you led me in the right direction. I feel dumb, but I think I was trying the set the onchange event on the wrong tag! should be the line 5 div, not the line 3 input. I will get back to you if I have any further issues.

thanks again!

<div data-dojo-attach-point="allValueBoxContainer" style="width:100%;padding-bottom:2px;">
            <div id="textBoxContainer" data-dojo-attach-point="stringTextBoxContainer" style="display:block;" title="Select from menu">
              <input data-dojo-attach-point="stringTextBox" type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-event="change:_onParamChange" data-dojo-props="trim:true, intermediateChanges:true"
                     style="display:block;width:100%;height:30px;" class="dijit-form-TextBox" >
              <div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect" data-dojo-attach-event="change:_onParamChange"
                   data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
            </div>‍‍‍‍‍‍‍

Re: onchange events and dojo TextBox confusion

FranklinAlexander — Thu, 21 Jun 2018 13:31:31 GMT

Robert,

The 'change' event is working, but I get a 'function not found' error when I make another selection from the dropdown menu. The issue is that the 'FilteringSelect' element with the attached 'change' event is in the 'SingleParameter.html file, and the function I am trying to call ("change:_onSearch") is in the Widget.js file. Not sure the best way to approach this, so far I have not found a way to call the function, or would it be better to set up an event listener in the Widget.js file (since that is where the function I want to call resides)? If I go that route, then I have the difficulty of trying to access the domNode (which I can't seem to do either). I am not showing any codes examples, because I just want some advice on the best approach to take at this point, this is probably something that's is done frequently and no big deal.

Thanks

Re: onchange events and dojo TextBox confusion

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:48:57 GMT

Franklin,

In your event handler in the SingleParameter.js, if it fires this line:

this.emit('sp-enter-pressed',{});‍

The Parameter.js will fire this line:

sp.on('sp-enter-pressed', lang.hitch(this, function(){
  this.emit('enter-pressed', {});
}));‍‍‍

Then the Widget.js will fire this code:

this.paramsDijit.on('enter-pressed', lang.hitch(this, function () {
  this.search(null, this.AttributeLayerIndex, this.expressIndex);
}));‍‍‍

Re: onchange events and dojo TextBox confusion

FranklinAlexander — Sat, 11 Dec 2021 06:49:00 GMT

Ok, if I understand you, I should be able to use the same logic to fire off the 'change' event. I was also able to fix the issue with the 'enter' key not working by adding the 'keydown' event for the 'stringCodedValuesFS' attach point (where my select menu is located).

this.own(on(this.stringCodedValuesFS, 'keydown', lang.hitch(this, function(evt){
   var keyNum = evt.keyCode !== undefined ? evt.keyCode : evt.which;
   if (keyNum === 13) {
      this.emit('sp-enter-pressed',{});
   }
})));‍‍‍‍‍‍

Thanks!

Re: onchange events and dojo TextBox confusion

RobertScheitlin__GISP — Thu, 21 Jun 2018 14:39:28 GMT

Yep