CODEWITHSUNDEEP
javascriptdojo
Marco
Marco

Reputation: 23937

Cannot connect click eventhandler to button in dojo

I am creating a small webservice, which needs a button to recenter the map to a predefined point. Which seemed to be a one-minute requirement has kept me busy for the last 2 hours.

The script is using ArcGis Js api 3.9.

This is the code in question:

//ClickEvent To reCenter the map
var ReCenterButton = dom.byId('btnReCenter');
ReCenterButton.on('click', function (e) { 
     map.centerAndZoom(new Point(14, 51), 9);
});

Markup:

<button id="btnReCenter" data-dojo-type="dijit/form/Button" type="button">ReCenter</button>

The line ReCenterButton = dom.byId(/* { ... } */); throws the error:

Uncaught TypeError: undefined is not a function.

What am I missing here?

Upvotes: 0

Views: 311

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

I think there are several errors here, first of all there is no Dojo 3.9, I suppose this is a typo and you mean Dojo 1.9.

The error you got means it cannot find a function, probably because you didn't import the dojo/dom module and thus it cannot find the dojo/dom::byId() function. Make sure the module is properly included in your require() and it is mapped upon a variable called dom, for example:

require([ "dojo/dom" ], function(dom) {
    var ReCenterButton = dom.byId("btnReCenter");
});

However, a DOM node has no on() function, so this could be the reason of the error as well. When you're using dojo/dom::byId() it will return a plain DOM node. However, if you're working with widgets like dijit/form/Button you should rather use the dijit/registry::byId() function, for example:

require([ "dijit/registry", "dojo/ready", "dijit/form/Button", "dojo/parser" ], function(registry, ready) {
    ready(function() { // Wait until the HTML markup is parsed and the widgets are instantiated
        var ReCenterButton = registry.byId('btnReCenter'); // Use dijit/registry
        ReCenterButton.on('click', function (e) {
            map.centerAndZoom(new Point(14, 51), 9);
        });
    });
});

Upvotes: 1

Related Questions