Insert New Layer TOC widget not working

AlexGole

Hi all,

I am trying to understand why the "insert new layer" of the TOC widget does not work with my script. It seems like I hooked the buttons correctly using on(domByID) technic. Not quite sure why the "Insert New Layer of the TOC widget does not work in my script.

Here is my map.

TOC widget is here

RiyasDeen

Hi Alex,

If it helps, this is my inference on why your button click event is not getting fired up. I still don't know how to get around this, but my view is you should not mix up two frameworks, at least at element level.

        $('.popover-markup>.trigger').popover({
            html: true,
            title: function () {
                return $(this).parent().find('.head').html();
            },
            content: function () {
                return $(this).parent().find('.content').html();
            },
            container: 'body',
            placement: 'bottom'
        });

Above popover function is reading the content element (below) and attaching it to popover node created by bootstrap. As part of this process it's deleting the InsertNewLayer button from dom and inserting it back into the dom, Your button click event is attached from dojo before this process occurs and is not actually available when you click the button.

  <div class="content hide">



                <div class="form-group">
                    <input id="NewLayerURL" size="110" type="text" class="form-control" value="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"/>
                </div>
                <button id="InsertNewLayer" disabled="disabled" class="btn btn-default btn-block">Add...</button>
            </div>

As a test try replacing above node with below. This creates two InsertNewLayer button, click the larger one, it fires your click event.

           <div class="content">
                <div class="form-group">
                    <input id="NewLayerURL" size="110" type="text" class="form-control" value="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"/>
                </div>
                <button id="InsertNewLayer" disabled="disabled" class="btn btn-default btn-block" style="z-index:100000; position: absolute; top: 20px; left: 0px;">Add...</button>
            </div>