onchange events and dojo TextBox confusion

[FranklinAlexander]

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!

[RobertScheitlin__GISP · Accepted solution]

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)...

[FranklinAlexander]

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>‍‍‍‍‍‍‍

[FranklinAlexander]

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

[RobertScheitlin__GISP]

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

[FranklinAlexander]

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! 

[RobertScheitlin__GISP]

Yep