Why isn't my button getting found?

TracySchloss · ‎05-15-2015

This is a very basic script, but I can't figure out why it's not finding my GO button! I've looked it over many times and can't spot anything out of order in terms of my requires. I thought at first there was something wrong with the function I was calling, so I made a 2nd one that's still just empty. I have a very convoluted where clause to execute and I'm attempt to let the user enter the codes, but I can't get past creating the button to execute it!

 <!DOCTYPE html>
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Search</title> 
    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/claro/claro.css"/> 
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>
 
<style type = "text/css">
  #mapDiv, .map {
    height: 500px;
    width: 500px;
  }
</style>
   <script type="text/javascript">
     var dojoConfig = { 
      parseOnLoad: false,
      async:true
      };
    </script>
<script type="text/javascript" src="https://js.arcgis.com/3.13/"></script> 
 </head>
<body class="claro">
    <script type=text/javascript> 
        var pathName = "https://ogitest.oa.mo.gov"; 
                  
        require(["dojo/parser","esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", 
        "esri/tasks/query", "dojo/on", "dojo/dom", "dijit/registry", "dijit/form/Button", "dojo/domReady!"
        ], function(
       parser, Map, FeatureLayer, ArcGISDynamicMapServiceLayer, Query, 
       on, dom, registry, Button){
        parser.parse();
        var  map = new Map("mapDiv", {
              center: [-92.593, 38.5],
              zoom: 7,
              basemap: "topo"
          });
          var pointLayer = new FeatureLayer(pathName + "/arcgis/rest/services/DSS/medProvider/MapServer/0", {
              mode: FeatureLayer.MODE_ONDEMAND,
              id: "pointLayer",
              outFields: ["*"]
          });
          var countyLayer = new ArcGISDynamicMapServiceLayer(pathName + "/arcgis/rest/services/BaseMap/county_simple/MapServer", {
              id: "countyLayer"
          });
          pointLayer.on('load', executeSearch);
          map.addLayers([countyLayer,  pointLayer]);
                         
           function executeSearch(){
          //   console.log('in executeSearch');
        //    var provCode = dom.byId('txtProvider').value;
         //   var specCode = dom.byId('txtSpecialty').value;
             var query = new Query();
            // var whereClause = "Provider_Type IN ('" + sortedString + "')";
          //   var whereClause = "ID_PROV_TYPE_FK IN ('40','74') AND ID_SPECIALTY_FK IN ('73','74','75','83','84','85')";
            var whereClause = "ID_PROV_TYPE_FK IN ('35') AND ID_SPECIALTY_FK IN ('E5')";
      //   var whereClause = "ID_PROV_TYPE_FK IN ('" + provCode + "') AND ID_SPECIALTY_FK IN ('" + specCode + "')";
        //   var whereClause = "1=1";
             query.where = whereClause;
            pointLayer.setDefinitionExpression(whereClause);
var gridQuery = new Query();
        pointLayer.selectFeatures(gridQuery, FeatureLayer.SELECTION_NEW, function(results) {
          dom.byId('infoDiv').innerHTML = results.length + " features found";
              if ( results.length > 0 ) {
                var feature = results[0];
               
              } else {
                console.log("error in pointLayer selection");
              }
            }); 

           } 
function executeBtnSearch(evt){
  console.log('in executBtnSearch');
}
          //event listener
    registry.byId("btnGo").on("click", executeSearch2);
});
  </script>          
        <div id="mapDiv">
           <input id="txtProvider" dojo-data-type="dijit/form/TextBox" placeHolder='Enter Provider Code'>
            </input>
            <input id="txtSpecialty" dojo-data-type="dijit/form/TextBox" placeHolder='Enter Specialty Code'>
            </input>
            <button id="btnGo" dojo-data-type="dijit/form/Button"> GO </button>
        </div>
       <div id="infoDiv">Features </div>
  </body>
</html>

TomSellsted · ‎05-15-2015

Tracy,

For your button try:

var btnGo = dom.byId("btnGo"); 
on(btnGo, "click", executeSearch);

Regards,

Tom

View solution in original post

TomSellsted · ‎05-15-2015

Tracy,

For your button try:

var btnGo = dom.byId("btnGo"); 
on(btnGo, "click", executeSearch);

Regards,

Tom

RobertScheitlin__GISP · ‎05-15-2015

Tracy,

The reason Toms response is correct is because registry.byId is for widget and your button is not a widget, it is just a standard dijit button.

TracySchloss · ‎05-18-2015

All this time I had it in my head that if I was using dojo components I needed to use 'registry.byId'. In the case of my button, it's even more confusing to me, since it's typed as dijit/form/Button.

RobertScheitlin__GISP · ‎05-18-2015

Tracy,

Sorry, I have added to your confusion by saying dijit when I should have said widget.

dijit/registry stores a collection of all the dijit widgets within a page. It is commonly used to retrieve a reference to a widget from a related piece of data (such as the widget’s DOM node or ID)

TracySchloss · ‎08-20-2015

I hate to reopen a closed thread, but I'm having the same issue as before, but this time it's still not finding it.

This is how my button is defined:

<button id="btnMap" data-dojo-type="dijit/form/Button"> View Map </button>

This is the click event I'm trying to add:

    var btnMap = dom.byId('btnMap');
    on(btnMap, "click", function (evt){
      console.log("button has been clicked")
    window.open(pathName+"/DHSS/WICprovider/index.html");
    });

It works if I don't have the data-dojo-type defined, but I want the styling that comes with it.

KenBuja · ‎08-20-2015

I have a button

<button data-dojo-type="dijit/form/Button" type="button" title="Project information" id="btnHelp">
    Project information
</button>

that I wire up using registry and it works properly. However, I have this in the ready function (using "dojo/ready")

ready(function () {
    registry.byId("btnHelp").on("click", function () { registry.byId("dialogWelcome").show(); });
});

TomSellsted · ‎08-20-2015

Tracy,

It appears just to be a typo. Your button definition should be dojo-data-type and not data-dojo-type.

Regards,

Tom

TracySchloss · ‎08-20-2015

That can't be right. That's the order from the dojotoolkit documentation. I have various other content panes all with data-dojo-type and they work.

TomSellsted · ‎08-20-2015

Tracy,

I had just set up a quick demo using your code above and adding the new button. All of the the above elements used dojo-data-type. Your btnMap used data-dojo-type. You can view it at: http://gis.yakimawa.gov/demo/buttonevent.html

Regards,

Tom