Dojo.byID/registry.ById textbox not visible inside a function

[BillChappell]

I've got a simple webpage where you enter in street, city, and it hits a geocoding service. The service returns X,Y and I'm trying to write those values into a "dijit/form/TextBox". For testing I am able to set the street, city textboxes using registry.byId and pass the value to the service. The function that parses out the returned X,Y is not able to see the X,Y textboxes.

require([ 'esri/map',"dojo/on","dojo/parser","dijit/registry","dojo/ready","dojo/dom","dijit/form/Button","dijit/form/TextBox", 'esri/geometry/Point','esri/symbols/SimpleMarkerSymbol','esri/Color','esri/graphic',"esri/symbols/PictureMarkerSymbol",'dojo/_base/xhr', 'dojo/domReady!' ], function (Map, on, parser, registry, ready, dom, Point, SimpleMarkerSymbol, Color, Graphic, PictureMarkerSymbol, xhr) { var map = new Map("map", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" });
parser.parse(); registry.byId("txtbx1").set("value", "800 n Pearl St");  //<<< This works and sets the valueregistry.byId("txtbx2").set("value", "Albany");  //<<< This works and sets the value// So I take the values from the testbox, hit a geocoding service and it returns a x,y// The function below sohow the JSON return from the service as I pull out the X,Y.// Now I was trying to put the X,Y back into a dojo textbox but inside this function // I'm not able to see/hit the textbox//SAM Servicefunction SFunction(response) { var obj1 = JSON.parse(response); console.log(obj1);  var Sx= obj1.candidates[0].location.x;  //returns -73.7363046904528 var Sy= obj1.candidates[0].location.y;  //return 42.67997793613371 console.log(Sx +", "+Sy); dojo.byId("txtbx4").innerHTML=Sy;  //Cannot set property 'innerHTML' of nullregistry.byId("txtbx4").set("value", Sy);  //Cannot read property 'set' of undefineddocument.getElementById("txtbx4").value = Sy;  //Cannot set property 'value' of null‍‍

[RobertScheitlin__GISP]

Bill,

   It was hard to tell because of the missing code formatting.

/blogs/dan_patterson/2016/08/14/script-formatting 

But your requires are definetly out of order and you should not need dojo/Ready.

require([
 'esri/map',"dojo/on","dojo/parser","dijit/registry",
 "dojo/dom",'esri/geometry/Point','esri/symbols/SimpleMarkerSymbol',
 'esri/Color','esri/graphic',"esri/symbols/PictureMarkerSymbol",
 'dojo/_base/xhr',"dijit/form/Button","dijit/form/TextBox",'dojo/domReady!'
 ], function (
  Map, on, parser, registry,
  dom, Point, SimpleMarkerSymbol, 
  Color, Graphic, PictureMarkerSymbol,
  xhr
) {
 var map = new Map("map", {
   center: [-56.049, 38.485],
   zoom: 3,
   basemap: "streets"
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BillChappell]

"your requires are definitely out of order"  Any idea of where I can find a published list showing the correct order of the requires? I know the more I hack at it, the more extras that are not needed are included. I wish they has an arcgislint site that would read your JavaScript and insert the correct requires in the correct list. 

[RobertScheitlin__GISP · Accepted solution]

Bill,

   It is actually so simple once you understand it that there is no need for an linting or anything like that. The order in which you place the requires and there subsequent vars has to match. The thing is that some requires do not need to have associated vars if that require will not be used in JS code portion. An example of that is the "dijit/form/Button" that you have in your code. You have to have that require so that you can use the Button in your html code but you do not have to have a matching var for it since you are not creating that object in your JS code. So your mistake was that you added added "dijit/form/Button","dijit/form/TextBox" in your require list and they did not need or have subsequent vars and this threw your require list out of order. You should always place dijits that you use in your html code at the end of your require list. The exception is that "dojo/domReady!" should always be last no matter what.

So just to recap if you have "esri/map" then you have to have the Map var in the same ordinal position in your function vars.

Notice in my corrected code that the appearance of the require and subsequent vars match:

require([
 'esri/map',"dojo/on","dojo/parser","dijit/registry",
 "dojo/dom",'esri/geometry/Point','esri/symbols/SimpleMarkerSymbol',
 'esri/Color','esri/graphic',"esri/symbols/PictureMarkerSymbol",
 'dojo/_base/xhr',"dijit/form/Button","dijit/form/TextBox",'dojo/domReady!'
 ], function (
  Map, on, parser, registry,
  dom, Point, SimpleMarkerSymbol, 
  Color, Graphic, PictureMarkerSymbol,
  xhr
) {

1. esri/map > Map
2. dojo/on > on
3. dojo/parser > parser
4. dijit/registry > registry

etc, etc

Hope this helps.

[BillChappell]

Thank you, I’ve never had that explained, and it now makes sense. In my Esri class it was rushed over but looking back on it they were teaching JavaScript plus their api.

I also found another reason why it didn’t work for me. I forgot the second quote around my dojo textbox id. If it can’t id, it must not exist.

id="txtbx4" data-dojo-type="dijit/form/TextBox" />

Thanks Again.

Bill