dojo error with measure tool

3485
9
11-06-2013 11:15 AM
AndrewPratt
New Contributor III
I am trying to build a ERSI webmap using the 3.7 API and dojo and all has been going well until I tried to get the measure tool working. I have an accordion content view on the left side and I'm trying to push the measure tool into that DIV but I'm getting the following dojo error

Error: Tried to register widget with id==dijit_layout_ContentPane_1 but that id is already registered
http://js.arcgis.com/3.7/
Line 1396


If I place the measure div outside the Accordion section it works fine but that's not ideal. I think it is the way this tool is natively set to be wrapped in its own container and by default builds a Contentpane for it...but how do I get around that?



var measurement = new esri.dijit.Measurement({
              map: app.map
          }, dojo.byId('measurement'));
          measurement.startup();


      <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
            <!-- start AccordionContainer -->
            <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20, region:'leading', splitter:true" style="width: 300px;" id="leftAccordion">
                 
                <div data-dojo-type="dijit/layout/AccordionPane" title="Layers">
                    <div id="layerToggle"  selected="true">
                  Toggle Layers: <br />
                </div>       
                </div>
                <div data-dojo-type="dijit/layout/AccordionPane" title="Legend">
                   <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/AccordionPane" title="Query">
                </div>
                <div data-dojo-type="dijit/layout/AccordionPane" title="Print">
                   <div>Select a print template.</div>
                    <div id="print_button"></div>
                 </div>
                <div data-dojo-type="dijit/layout/AccordionPane" title="Measurement">
                   <div id="measurement"></div>
                </div>
            </div>            
            <!-- end AccordionContainer -->
      </div>
0 Kudos
9 Replies
BenFousek
Occasional Contributor III
Andrew,
1) in the constructor you don't need need to byId; just the srcRefNode id

2) onShow with tab to startup the measure

3) use AMD

var measurement = new Measurement({
  map: app.map
}, 'measurement');

on.once(registry.byId('measureTab'), 'show', function() {
  measurement.startup();
});


[HTML]<div id="measureTab" data-dojo-type="dijit/layout/AccordionPane" title="Measurement">
  <div id="measurement"></div>
</div>[/HTML]
0 Kudos
AndrewPratt
New Contributor III
Thanks! But now I get this error

ReferenceError: on is not defined
0 Kudos
BenFousek
Occasional Contributor III
You need to define it.

require(['dojo/on'], function(on) {

});
0 Kudos
AndrewPratt
New Contributor III
That solves that error but it still comes back with the initial error. I've swapped out the URLs for a public map service I have running so here's the whole code if you care to take a look (it won't load as dropbox won't let it load dojo but I couldn't paste the code here either as it's too long).

https://dl.dropboxusercontent.com/u/14069182/index.html
0 Kudos
BenFousek
Occasional Contributor III
Use registry.byId() for on show.

require(['dijit/registry'], function(registry) {
  on.once(registry.byId('measureTab'), 'show', function() {
    measurement.startup();
  });
});
0 Kudos
AndrewPratt
New Contributor III
If I use registry.byId it returns an undefined value. If I switch it to dom.byId I get the div returned but the measurement.startup(); doesn't get run.

console.log(dom.byId('measureTab'));
on.once(dom.byId('measureTab'), 'show', function() {
   alert("Measure!");
 measurement.startup();

  });


For example if I use the above code I get the div HTML code in the console window but the alert never fires.
0 Kudos
BenFousek
Occasional Contributor III
I looked at your code again and noticed you are using dijit/layout/AccordionPane. AccordionPane is depreciated and it probably doesn't have dojo/on mixed in or something like that. Use dijit/layout/ContentPane.
0 Kudos
AndrewPratt
New Contributor III
That still doesn't seem to resolve the issue. I copied the code I am using now to dropbox.

https://dl.dropboxusercontent.com/u/14069182/index.zip
0 Kudos
EricPfirman
New Contributor III

Did you ever resolve this and if so, how?

0 Kudos