2

I've just started with Dojo/Javascript and even though I kind of understand all the AMD way of coding, I keep getting stuck on these (probably) easy things.

How can I programmatically access a widget created in a declarative way?

I have a toggle button created like this:

<button id="toggleLeg" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true, onChange: function(value){legendVisibility(value);}">Legend/Layers</button>

And I would like to call the legendVisibility() function when clicking on it using the true/false returning values from the button.

The function simply toggle an accordion container on and off using its CSS property (the accordion is included into a content pane with id="legPanel").

    function legendVisibility(value) {
        checked = value;
        var rightPane = dom.byId('legPanel');
        if (checked == false) {
            //I want the right pane out
            domStyle.set(rightPane , 'display', 'none');
        } else {
            //I want the right pane in (preserving its content)
            domStyle.set(rightPane , 'display', 'block');
        }
    }

If I put it outside the main require function it clearly throws a ReferenceError saying that "dom is not defined" when declaring the var rightPane.

How can I correctly include it into the require function and programmatically use the widget?

Should I get rid of the onChange: function(value){legendVisibility(value);} when creating the widget?

The modules I need are "dojo/dom" to get the reference of the node and "dojo/dom-style" to change the CSS properties.

Do I need the "dojo/on" too to use the event propagated by the click? (I also tried with the Toggler function with no luck!)


        registry.byId("toggleLeg").on("change", function() {
            checked = this.value;
            var rightPane = dom.byId('legPanel');
            if (checked == false) {
                //I want the right pane out
                domStyle.set(rightPane, 'display', 'none');

                registry.byId("mapDiv").resize();
                registry.byId("mapDiv").reposition();
            } else {
                //I want the right pane in (preserving its content)
                domStyle.set(rightPane, 'display', 'block');

                registry.byId("mapDiv").resize();
                registry.byId("mapDiv").reposition();
            }
        });
4

definitely a scope problem. check out this sample which includes an example of wiring up a Dijit event listener within a require callback in JS instead of declarative HTML.

registry.byId("numLocations").on("change", function() {
  params.defaultTargetFacilityCount = this.value;
  clearGraphics();
});
4
  • Thanks @john-gravois for your replay but now I'm getting a TypeError: registry.byId(...) is undefined. I double checked the require array: "dojo/parser", "dijit/registry", "dojo/dom", "dojo/dom-style", "dojo/domReady!" as well as the arguments in the callback (parser, registry, dom, domStyle). The var dojoConfig = { parseOnLoad: false, async:true } and parser.parse(), the div is there and has that id but the function (I put it in the EDIT) doesn't go through. – mic Jan 7 '15 at 13:23
  • Here is the fiddle. I've just put parseOnLoad: true and now it's partially working (toggle off but not on) but I have no idea why! – mic Jan 7 '15 at 20:36
  • you couldn't have been closer. just reference the object which is returned to you when the function is called. jsfiddle.net/LmLfvb6h/1 – john gravois Jan 9 '15 at 4:54
  • Thanks man! I really appreciate your help! I'm still stuck on the "registry.byId(...) is undefined" in the main application (maybe I've being doing something wrong with the required modules and the arguments..I might get in touch again if I don't figure it out!) but at least now this problem is solved and I have something to work on! Cheers – mic Jan 9 '15 at 13:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.