TabContainer content tab selected but content does not display

TamiaRudnicky · ‎07-04-2016

Hi,

I have based my Javascript api 3.17 code on the Info window with chart | ArcGIS API for JavaScript 3.17 sample. I am using a dynamicMapServiceLayer instead of a FeatureLayer and I have defined a layout in html. I have programmatically created a tab container within the popup so that the user can view info about the polygon and then see graphs and a table in the other tabs. My problem is that when I click on the map and the popup appears, the first tab appears selected but no content is shown. Other tabs clicked work appropriately. When the original tab is click, then the content is visible. I would like the content to be visible when the popup opens and not have to click back and forth on the tabs to see the first content pane. I've done a lot of searching and have seen one or two posts with a similar problem. The solution given is to do a resize, however that doesn't seem to work for me. Perhaps I did not put it in the correct place.

I have also inspected the elements and see that the div with role="tabpanel" has a class="dijitTabContainerTopChildWrapper dijitHidden" . When a tab in the tabcontainer is clicked and shows its contents then the class changes to "dijitTabContainerTopChildWrapper dijitVisible". I am at a loss on how to make my selected tab be visible.

Can anyone please help me? I have included my test code below.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Info Window with Chart</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html,
        body, #contentDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map {
            padding: 0;
            border-color: black;
            border-width: 1px;
        }
        
        #header {
            height: 60px;
        }
        
        #rightPane {
            width: 20%;
        }
        
        .claro .tabStripButton {
            display: none;
        }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        var map;
        var theme = "Wetland";
        require([
            "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/dijit/InfoWindow", "esri/InfoTemplate", "esri/dijit/Popup", "esri/layers/ImageParameters",
        "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "dijit/layout/ContentPane", "dijit/layout/TabContainer",
        "dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",
        "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",
        "dojox/charting/themes/" + theme,
        "dojo/dom-construct", "dojo/dom-class",
        "dojo/number", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
      ], function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
            InfoWindow, InfoTemplate, Popup, ImageParameters,
            SimpleFillSymbol, SimpleRenderer,
            ContentPane, TabContainer,
            Chart2D, Pie,
            Highlight, MoveSlice, Tooltip,
            dojoxTheme,
            domConstruct, domClass,
            number, parser
        ) {

            parser.parse();
            // Use the info window instead of the popup.
            var popupOptions = {
                marginLeft: "40",
                marginTop: "100"
            };
            var vosaraPopup = new Popup(popupOptions, domConstruct.create("div"));
            vosaraPopup.visibleWhenEmpty = false;
            vosaraPopup.hideDelay = 0;

            // InfoTemplate titles ....
            var reefInfoTemplate = new InfoTemplate();
            reefInfoTemplate.setTitle("<b>${NAME}: ${SQMI} sq miles</b>");
            reefInfoTemplate.setContent(getWindowContent);

            map = new Map("map", {
                basemap: "streets",
                center: [-76.6435, 37.3905],
                infoWindow: vosaraPopup,
                zoom: 10
            });
            map.infoWindow.resize(400, 350);

            var imageParametersCen = new ImageParameters();
            var layerDefsFP = [];
            layerDefsFP[3] = "STATE_FIPS LIKE '51%'";
            imageParametersCen.layerDefinitions = layerDefsFP;
            imageParametersCen.layerIds = [2];
            imageParametersCen.layerOption = ImageParameters.LAYER_OPTION_SHOW;
            imageParametersCen.transparent = true;
            var censusLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
                "imageParameters": imageParametersCen,
                "opacity": 1,
                id: 'census'
            });
            censusLayer.setVisibility(true);
            censusLayer.setVisibleLayers([2]);
            censusLayer.setInfoTemplates({
                2: {
                    infoTemplate: reefInfoTemplate
                }
            });

            map.addLayer(censusLayer);

            function getWindowContent(censusLayer) {
                // Make a tab container.
                var tc = new TabContainer({
                    style: "width:100%;height:100%;",
                    id: "tabc"
                }, domConstruct.create("div"));

                // Display attribute information.
                var cp1 = new ContentPane({
                    title: "Details",
                    content: "<br>Description: <br><br><b>County/City Name:</b>" + censusLayer.attributes.NAME + "<br><b>2000 Population:</b>" + censusLayer.attributes.POP2000 + "<br><b>2007 Population:</b>" + censusLayer.attributes.POP2007 + "<br>"
                });

                var cp2 = new ContentPane({
                    title: "Oyster Graph",
                    content: "a graph here"
                });

                var cp3 = new ContentPane({
                    title: "Shell Graph",
                    content: "another graph"
                });

                var cp5 = new ContentPane({
                    title: "Harvest Table",
                    content: "a table here"
                });

                tc.addChild(cp1);
                tc.addChild(cp2);
                tc.addChild(cp3);
                tc.addChild(cp5);
                return tc.domNode;
            }
        });
    </script>
</head>

<body class="claro">
    <div id="contentDiv" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <p id="pTitle">Header</p>
        </div>

        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
        </div>

        <div id="rightPane" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right'">
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Map Contents:'">
                <div id="bcrs" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', region: 'right', gutters: false">
                    <div id="tocDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
                    </div>
                    <div id="legDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter: true">
                    </div>
                </div>
            </div>

            <div data-dojo-type="dijit/layout/TabContainer" title="About" nested="true" selected="true">
                <div id="introDiv1" data-dojo-type="dijit/layout/ContentPane" title="Intro" selected="true">
                    Help me figure this out! Click on a county and a popwindow appears. Notice that the first tab (Details) is selected but no content shows. Click another tab and content is visible. Click on the Details tab and now the content shows. How do I get the content to be visible without having to click back and forth?
                </div>
                <div id="methDiv" data-dojo-type="dijit/layout/ContentPane" title="Methods">
                    more text here
                </div>
                <div id="helpDiv" data-dojo-type="dijit/layout/ContentPane" title="Help">
                    still more text here.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Thank so much for any help that can be provided!

edit: sorry, I don't think inserting my code worked so I've added it as an attachment.

KellyHutchins · ‎07-05-2016

Here's a revised version of your code that shows one way to do this. Basically we resize the tabs when the popup content is modified.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Info Window with Chart</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html,
        body, #contentDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }


        #map {
            padding: 0;


        }




    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        var map;
        var theme = "Wetland";
        require([
            "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/dijit/InfoWindow", "esri/InfoTemplate", "esri/dijit/Popup", "esri/layers/ImageParameters",
        "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "dijit/layout/ContentPane", "dijit/layout/TabContainer",
        "dojo/dom-construct", "dojo/dom-class", "dijit/registry", "dojo/query",
        "dojo/number", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
      ], function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
            InfoWindow, InfoTemplate, Popup, ImageParameters,
            SimpleFillSymbol, SimpleRenderer,
            ContentPane, TabContainer,
            domConstruct, domClass,registry,query,
            number, parser
        ) {


            parser.parse();




            // InfoTemplate titles ....
            var reefInfoTemplate = new InfoTemplate();
            reefInfoTemplate.setTitle("<b>${NAME}: ${SQMI} sq miles</b>");
            reefInfoTemplate.setContent(getWindowContent);


            map = new Map("map", {
                basemap: "streets",
                center: [-76.6435, 37.3905],
                zoom: 10
            });
            map.infoWindow.resize(400, 350);
            map.infoWindow.on("selection-change", function(e){
              query(".dijitTabContainer", this.domNode).forEach(function(node){
                var tc = registry.getEnclosingWidget(node);
                if(tc){
                  tc.selectChild(tc.getChildren()[0]);
                  tc.resize();
                }
              });
            });


            var imageParametersCen = new ImageParameters();
            var layerDefsFP = [];
            layerDefsFP[3] = "STATE_FIPS LIKE '51%'";
            imageParametersCen.layerDefinitions = layerDefsFP;
            imageParametersCen.layerIds = [2];
            imageParametersCen.layerOption = ImageParameters.LAYER_OPTION_SHOW;
            imageParametersCen.transparent = true;
            var censusLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
                "imageParameters": imageParametersCen,
                "opacity": 1,
                id: 'census'
            });
            censusLayer.setVisibility(true);
            censusLayer.setVisibleLayers([2]);
            censusLayer.setInfoTemplates({
                2: {
                    infoTemplate: reefInfoTemplate
                }
            });


            map.addLayer(censusLayer);


            function getWindowContent(censusLayer) {
                // Make a tab container.
                var tc = new TabContainer({
                    style: "width:100%;height:100%;",
                    doLayout: false
                }, domConstruct.create("div"));
                tc.startup();


                // Display attribute information.
                var cp1 = new ContentPane({
                    title: "Details",
                    content: "<br>Description: <br><br><b>County/City Name:</b>" + censusLayer.attributes.NAME + "<br><b>2000 Population:</b>" + censusLayer.attributes.POP2000 + "<br><b>2007 Population:</b>" + censusLayer.attributes.POP2007 + "<br>"
                });


                var cp2 = new ContentPane({
                    title: "Oyster Graph",
                    content: "a graph here"
                });


                var cp3 = new ContentPane({
                    title: "Shell Graph",
                    content: "another graph"
                });


                var cp5 = new ContentPane({
                    title: "Harvest Table",
                    content: "a table here"
                });


                tc.addChild(cp1);
                tc.addChild(cp2);
                tc.addChild(cp3);
                tc.addChild(cp5);
                return tc.domNode;
            }
        });
    </script>
</head>


<body class="claro">
    <div id="contentDiv" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true">
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
        </div>
    </div>
</body>
</html>

View solution in original post

KellyHutchins · ‎07-05-2016

Here's a revised version of your code that shows one way to do this. Basically we resize the tabs when the popup content is modified.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Info Window with Chart</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html,
        body, #contentDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }


        #map {
            padding: 0;


        }




    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        var map;
        var theme = "Wetland";
        require([
            "esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/dijit/InfoWindow", "esri/InfoTemplate", "esri/dijit/Popup", "esri/layers/ImageParameters",
        "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "dijit/layout/ContentPane", "dijit/layout/TabContainer",
        "dojo/dom-construct", "dojo/dom-class", "dijit/registry", "dojo/query",
        "dojo/number", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
      ], function (
            Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
            InfoWindow, InfoTemplate, Popup, ImageParameters,
            SimpleFillSymbol, SimpleRenderer,
            ContentPane, TabContainer,
            domConstruct, domClass,registry,query,
            number, parser
        ) {


            parser.parse();




            // InfoTemplate titles ....
            var reefInfoTemplate = new InfoTemplate();
            reefInfoTemplate.setTitle("<b>${NAME}: ${SQMI} sq miles</b>");
            reefInfoTemplate.setContent(getWindowContent);


            map = new Map("map", {
                basemap: "streets",
                center: [-76.6435, 37.3905],
                zoom: 10
            });
            map.infoWindow.resize(400, 350);
            map.infoWindow.on("selection-change", function(e){
              query(".dijitTabContainer", this.domNode).forEach(function(node){
                var tc = registry.getEnclosingWidget(node);
                if(tc){
                  tc.selectChild(tc.getChildren()[0]);
                  tc.resize();
                }
              });
            });


            var imageParametersCen = new ImageParameters();
            var layerDefsFP = [];
            layerDefsFP[3] = "STATE_FIPS LIKE '51%'";
            imageParametersCen.layerDefinitions = layerDefsFP;
            imageParametersCen.layerIds = [2];
            imageParametersCen.layerOption = ImageParameters.LAYER_OPTION_SHOW;
            imageParametersCen.transparent = true;
            var censusLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
                "imageParameters": imageParametersCen,
                "opacity": 1,
                id: 'census'
            });
            censusLayer.setVisibility(true);
            censusLayer.setVisibleLayers([2]);
            censusLayer.setInfoTemplates({
                2: {
                    infoTemplate: reefInfoTemplate
                }
            });


            map.addLayer(censusLayer);


            function getWindowContent(censusLayer) {
                // Make a tab container.
                var tc = new TabContainer({
                    style: "width:100%;height:100%;",
                    doLayout: false
                }, domConstruct.create("div"));
                tc.startup();


                // Display attribute information.
                var cp1 = new ContentPane({
                    title: "Details",
                    content: "<br>Description: <br><br><b>County/City Name:</b>" + censusLayer.attributes.NAME + "<br><b>2000 Population:</b>" + censusLayer.attributes.POP2000 + "<br><b>2007 Population:</b>" + censusLayer.attributes.POP2007 + "<br>"
                });


                var cp2 = new ContentPane({
                    title: "Oyster Graph",
                    content: "a graph here"
                });


                var cp3 = new ContentPane({
                    title: "Shell Graph",
                    content: "another graph"
                });


                var cp5 = new ContentPane({
                    title: "Harvest Table",
                    content: "a table here"
                });


                tc.addChild(cp1);
                tc.addChild(cp2);
                tc.addChild(cp3);
                tc.addChild(cp5);
                return tc.domNode;
            }
        });
    </script>
</head>


<body class="claro">
    <div id="contentDiv" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true">
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
        </div>
    </div>
</body>
</html>

Anonymous User · ‎05-31-2017

Hey khutchins-esristaff‌, the above code is super helpful! Got my project on the right foot for sure (especially for someone who is admittedly a novice in GIS development). I had a question about how multiple layers would work here. I have about 20 layers on my service and want to configure all the pop-ups. Could you show me how to reference a second layer in the above snippet? I'll need to customly configure each pop-up (i.e. different number of tabs, different content, etc.).

Could you explain (or show) how to do that with just one additional layer? Once I see how it scales I'll be able to scale up. Thanks!

KellyHutchins · ‎05-31-2017

Andrew

You should be able to define an info template for each layer and specify a function that creates the popup content. Here's an example that shows how to do this:

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Dog Info");
infoTemplate.setContent(getDogInfo);
var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Dogs/FeatureServer/0",{
infoTemplate: infoTemplate,
outFields: ["*"]
});
map.addLayer(featureLayer);
function getDogInfo(layer){
console.log("layer", layer);
return "<img src='"+ layer.attributes.Image + "' alt='" + layer.attributes.Breed + "'>";
}‍‍‍‍‍‍‍‍‍‍‍‍

Anonymous User · ‎06-01-2017

Thanks!

Have you ever seen an 'hcSetting' error? I have a custom app that's failing to initialize with that error message

KellyHutchins · ‎06-01-2017

No I'm sorry I haven't run into that error before.

TamiaRudnicky · ‎07-06-2016

Thank you so much Kelly! Your changes made a world of difference and I can now complete my project.