Button question

TimWitt · ‎03-05-2014

Hey everybody,

I am sure there is a very easy solution but for some reason I am stuck! I created a button in my map called "1234 Gus Hipp Blvd", now when I click the button an alert is supposed to pop up stating "1234 Gus Hipp Blvd", but for some reason nothing happens when I click it. This is more an exercise for creating a custom button and then handle a function when the button has been clicked.

Here is the code:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }     #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }     #LocateButton {       position: absolute;       top: 137px;       left: 20px;       z-index: 50;     }     #Button1 {       position: absolute;       top: 180px;       left: 20px;       z-index: 50;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "esri/dijit/LocateButton",         "dijit/registry",         "dijit/form/Button",                 "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom, BasemapToggle, HomeButton, LocateButton, registry, Button     ) {              var map;       var center = [-80.719892, 28.303518];       var zoom = 13,       map = new Map("mapDiv", {             center: center,             zoom: zoom,             basemap: "topo"       });                   on(map, "load", addGraphic);               var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([0,255,0,0.25]), 1),               new Color([255,0,0])               )       function addGraphic(){                         var singlePoint1 = new Point([-80.719892, 28.303518])             var singlePoint2 = new Point([-80.694706, 28.352613])             var attr1 = {"Xcoord":singlePoint1.x,"Ycoord":singlePoint1.y};             var attr2 = {"Xcoord":singlePoint2.x,"Ycoord":singlePoint2.y};             var infoTemplate1 = new InfoTemplate("Accident #1",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");             var infoTemplate2 = new InfoTemplate("Accident #2",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");              var store1 = new Graphic(singlePoint1,storepoint,attr1,infoTemplate1);             var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);             map.graphics.add(store1);             map.graphics.add(store2);             featureArray = [];             featureArray.push(store1);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint1);  // Add a basemap Toggle       }       var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup(); // Add home button       var home = new HomeButton({         map: map       }, "HomeButton");       home.startup(); // Location Button       var geoLocate = new LocateButton({         map:map       }, "LocateButton");       geoLocate.startup();            on(registry.byId("Button1"), "click", alertIt );       function alertIt(){        alert("1234 Gus Hipp Blvd");       }      });   </script>  </head> <body class="soria">   <div id="mapDiv">     <div id="BasemapToggle"></div>     <div id="HomeButton"></div>     <div id="LocateButton"></div>     <button id="Button1" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">1234 Gus Hipp Blvd</button>   </div> </body> </html>

Thanks!

Tim

JakeSkinner · ‎03-05-2014

Not sure why the styling is not working, but one way to work around this is to use an input tag of type button. You can then call this using the "dojo/dom" module. Ex:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }     #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }     #LocateButton {       position: absolute;       top: 137px;       left: 20px;       z-index: 50;     }     #Button1 {       position: absolute;       top: 180px;       left: 20px;       z-index: 50;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "esri/dijit/LocateButton",         "dojo/dom",         "dijit/form/Button",                 "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom, BasemapToggle, HomeButton, LocateButton, dom, Button     ) {              var map;       var center = [-80.719892, 28.303518];       var zoom = 13,       map = new Map("mapDiv", {             center: center,             zoom: zoom,             basemap: "topo"       });                   on(map, "load", addGraphic);               var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([0,255,0,0.25]), 1),               new Color([255,0,0])               )       function addGraphic(){                         var singlePoint1 = new Point([-80.719892, 28.303518])             var singlePoint2 = new Point([-80.694706, 28.352613])             var attr1 = {"Xcoord":singlePoint1.x,"Ycoord":singlePoint1.y};             var attr2 = {"Xcoord":singlePoint2.x,"Ycoord":singlePoint2.y};             var infoTemplate1 = new InfoTemplate("Accident #1",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");             var infoTemplate2 = new InfoTemplate("Accident #2",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");              var store1 = new Graphic(singlePoint1,storepoint,attr1,infoTemplate1);             var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);             map.graphics.add(store1);             map.graphics.add(store2);             featureArray = [];             featureArray.push(store1);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint1);  // Add a basemap Toggle       }       var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup(); // Add home button       var home = new HomeButton({         map: map       }, "HomeButton");       home.startup(); // Location Button       var geoLocate = new LocateButton({         map:map       }, "LocateButton");       geoLocate.startup();            on(dom.byId("Button1"), "click", alertIt );       function alertIt(){        alert("1234 Gus Hipp Blvd");       }      });   </script>  </head> <body class="soria">   <div id="mapDiv">     <div id="BasemapToggle"></div>     <div id="HomeButton"></div>     <div id="LocateButton"></div>         <input id="Button1" type="button" value="1234 Gus Hipp Blvd" />   </div> </body> </html>

View solution in original post

KenBuja · ‎03-05-2014

The button wasn't ready when it came time to wire up the click event. If you add a parser, then it will be ready. However, it's throwing off the styling of the button.

        require([
            "esri/map",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "dojo/_base/Color",
            "esri/geometry/Point",
            "esri/InfoTemplate",
            "esri/graphic",
            "dojo/on",
            "dojo/dom",
            "esri/dijit/BasemapToggle",
            "esri/dijit/HomeButton",
            "esri/dijit/LocateButton",
            "dijit/registry",
            "dijit/form/Button",
            "dojo/parser",
            "dojo/domReady!"
        ],
        function (
            Map,
            SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,
            on, dom, BasemapToggle, HomeButton, LocateButton, registry, Button, parser
        ) {
            parser.parse();

            var map;
            var center = [-80.719892, 28.303518];
            var zoom = 13,
            map = new Map("mapDiv", {
                center: center,
                zoom: zoom,
                basemap: "topo"
            });

TimWitt · ‎03-05-2014

Thanks Ken,

do you know why it would throw off the styling?

Tim

KenBuja · ‎03-05-2014

Unfortunately, I don't have an answer for that.

JakeSkinner · ‎03-05-2014

Not sure why the styling is not working, but one way to work around this is to use an input tag of type button. You can then call this using the "dojo/dom" module. Ex:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }     #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }     #LocateButton {       position: absolute;       top: 137px;       left: 20px;       z-index: 50;     }     #Button1 {       position: absolute;       top: 180px;       left: 20px;       z-index: 50;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "esri/dijit/LocateButton",         "dojo/dom",         "dijit/form/Button",                 "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom, BasemapToggle, HomeButton, LocateButton, dom, Button     ) {              var map;       var center = [-80.719892, 28.303518];       var zoom = 13,       map = new Map("mapDiv", {             center: center,             zoom: zoom,             basemap: "topo"       });                   on(map, "load", addGraphic);               var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([0,255,0,0.25]), 1),               new Color([255,0,0])               )       function addGraphic(){                         var singlePoint1 = new Point([-80.719892, 28.303518])             var singlePoint2 = new Point([-80.694706, 28.352613])             var attr1 = {"Xcoord":singlePoint1.x,"Ycoord":singlePoint1.y};             var attr2 = {"Xcoord":singlePoint2.x,"Ycoord":singlePoint2.y};             var infoTemplate1 = new InfoTemplate("Accident #1",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");             var infoTemplate2 = new InfoTemplate("Accident #2",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");              var store1 = new Graphic(singlePoint1,storepoint,attr1,infoTemplate1);             var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);             map.graphics.add(store1);             map.graphics.add(store2);             featureArray = [];             featureArray.push(store1);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint1);  // Add a basemap Toggle       }       var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup(); // Add home button       var home = new HomeButton({         map: map       }, "HomeButton");       home.startup(); // Location Button       var geoLocate = new LocateButton({         map:map       }, "LocateButton");       geoLocate.startup();            on(dom.byId("Button1"), "click", alertIt );       function alertIt(){        alert("1234 Gus Hipp Blvd");       }      });   </script>  </head> <body class="soria">   <div id="mapDiv">     <div id="BasemapToggle"></div>     <div id="HomeButton"></div>     <div id="LocateButton"></div>         <input id="Button1" type="button" value="1234 Gus Hipp Blvd" />   </div> </body> </html>

TimWitt · ‎03-05-2014

Thanks Jake, that fixed it.