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

[JonathanUihlein]

That application doesn't work correctly for folks outside your network because of the following:

http://webgisdevint1/arcgis/rest/services/Alex_Try/Layers/MapServer

I'd love to help but can't replicate your workflow with this being broken from my point of view.

[AlexGole]

Oh let me fix that sorry that was on the test environment.

[AlexGole]

Alright I added a public layer so the TOC would work. The Add layer is already public (ESRI's sample). Let me know if you can see the TOC now.

[JonathanUihlein]

It's still pointing to a local reference and failing to load for me.

http://webgisdevext1/arcgis/rest/services/ResourceMgmt/WatershedMapper/MapServer

You can test this by going to http://webgisdevext1 on a device outside your network.

It will redirect to http://www.webgisdevext1.com/ which isn't doesn't look like your website

[AlexGole]

Ha. Wrong environment again. Man this Friday is tough! 🙂 Well I finally decided to choose a random ESRI sample. So I am sure there is no mistake and can see the TOC in action.

[AlexGole]

Thanks for your help!

[RiyasDeen · Accepted solution]

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>

[AlexGole]

Riyas,

Thank you. It seems like your test work like a charm and your explanation was very clear. Should I not use bootstrap for this InserNewlayer function then? Is there something similar to popover in dojo that I could use?

Thank you,

Alex

[RiyasDeen]

Hi Alex,

Glad it helped.

No, you can still use bootstrap if you want, but you should hook the click event of your button after the popover is initialised, may be during show event. I'll try if i can hook these two events together, ll post back here if succeed in doing that.

Closest to popover in dojo is dijit/TooltipDialog — The Dojo Toolkit - Reference Guide , if you want to explore this option.