nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>input</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stringTextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/form/TextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>trim:true, intermediateChanges:true<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token">
<SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>block<SPAN class="punctuation token">;</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>30px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit-form-TextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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:

<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>stringTextBox<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>Search<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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!

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

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

All comments

RobertScheitlin__GISP

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! app showing widget with dropdown

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>allValueBoxContainer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">padding-bottom</SPAN><SPAN class="punctuation token">:</SPAN>2px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>textBoxContainer<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stringTextBoxContainer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>block<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">title</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Select from menu<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>input</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stringTextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/form/TextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-event</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>change:_onParamChange<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>trim:true, intermediateChanges:true<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>block<SPAN class="punctuation token">;</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN><SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>30px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit-form-TextBox<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stringCodedValuesFS<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/form/FilteringSelect<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-event</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>change:_onParamChange<SPAN class="punctuation token">"</SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>searchAttr:<SPAN class="punctuation token">'</SPAN>name<SPAN class="punctuation token">'</SPAN>,intermediateChanges:true<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit-form-FilteringSelect<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sp-enter-pressed'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

The Parameter.js will fire this line:

sp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sp-enter-pressed'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'enter-pressed'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Then the Widget.js will fire this code:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>paramsDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'enter-pressed'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>AttributeLayerIndex<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>expressIndex<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>stringCodedValuesFS<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'keydown'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> keyNum <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">?</SPAN> evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>which<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>keyNum <SPAN class="operator token">===</SPAN> <SPAN class="number token">13</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sp-enter-pressed'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Thanks!

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.