Destroy a Div and recreate it with the same name

TimWitt2 · ‎06-04-2015

Hey everybody,

I use the following code to create a map with a legend:

<!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>NOAA</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.12/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>
  <link rel="stylesheet" type="text/css" href="https://timw1984.github.io/agsjs/css/agsjs.css" />


    <style>
    html, body{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 1px;
        font-family: helvetica, arial, sans-serif;
        font-size: 90%;
  overflow: hidden;
    }
    #borderContainer {
  width: 100%;
  height: 100%;
    }
  #leftPane {
      width: 20%;
    }
  #bottomPane {
  width: 100%;
    }
  #centerPane {
  width: 100%;
  height: 100%;
    }
  #map {
  width: 100%;
  height: 100%;
    }
    </style>
  <script type="text/javascript">


                  var dojoConfig = { 
                    paths: {
                            agsjs: location.pathname.replace(/\/[^/]+$/, '') + 'https://timw1984.github.io/agsjs' 
  }
                  };
                             
     </script>


    <script src="https://js.arcgis.com/3.13/"></script>
    <script>
      var map;
      require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/parser", "agsjs/dijit/TOC","dojo/_base/connect","dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color","dijit/form/Button","esri/layers/FeatureLayer","dojo/dom-construct",
  "dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/layout/AccordionContainer","dijit/layout/ContentPane", "dijit/layout/AccordionContainer","dijit/form/TextBox","dojo/domReady!"], 
   function(Map,ArcGISDynamicMapServiceLayer, parser,TOC,connect,  dom, parser, on,Color, Button, FeatureLayer,domConstruct) {
   
  parser.parse();
        map = new Map("map", {
          basemap: "topo",  
          center: [-95.45, 37.75],
          zoom: 4
        });
  var county;
  var AddedLayer = "";
  var gauge = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/ahps_gauges/MapServer",{
  refreshInterval: 1,
  visible: false
  });
  var radar = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer",{
  refreshInterval: 1,
  visible: false
  });
  var hazard = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/cpc_weather_hazards/MapServer",{
  refreshInterval: 1,
  visible: false
  });

  map.addLayers([radar,hazard,gauge] );


  map.on('layers-add-result', legenddoit);


  function legenddoit(evt){
  if ( AddedLayer == "") {
  var LegendLayers = [{
  layer: hazard,
                    title: "Hazard",
  collapse: true
                },{
  layer: radar,
                    title: "Radar",
                    collapsed: true, // whether this root layer should be collapsed initially, default false.
                    slider: true,
  noLegend: true // whether to display a transparency slider.
                },{
  layer: gauge,
                    title: "Gauge",
  collapse: true,
                }];
  //radar.setVisibleLayers([0]);
  //gauge.setVisibleLayers([0]);
  //hazard.setVisibleLayers([0]);


  toc = new TOC({
  map: map,
                layerInfos: LegendLayers
            }, 'tocDiv');
            toc.startup();
  } else {
  var LegendLayers = [{
  layer: hazard,
                    title: "Hazard",
  collapse: true
                },{
  layer: radar,
                    title: "Radar",
                    collapsed: true, 
                    slider: true,
  noLegend: true
                },{
  layer: gauge,
                    title: "Gauge",
  collapse: true,
                }, {
  layer: county,
                    title: "County",
  collapse: true,
                }];
  toc2 = new TOC({
  map: map,
                layerInfos: LegendLayers
            }, 'tocDiv');
            toc2.startup();

  }


        };
  var myButton = new Button({
  label: "Click me!",
  onClick: function(){
  if (county !== undefined){
  console.log(county);
  map.removeLayer(county);
  }
            // Do something:
  NeededValue = dom.byId("myURL").value;
  console.log(NeededValue);
  county = new FeatureLayer(NeededValue,{
  outFields: ['*']
  });
  var MyName = county.name;
  map.addLayers([county]);
  AddedLayer = "Gotem";
  domConstruct.destroy("tocDiv");
  dojo.create("div", {id: "tocDiv"}, "LegendInHere");


  }
    }, "progButtonNode").startup();
      });
    </script>
  </head>


  <body class ="claro">
  <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true, liveSplitters:true">
  <div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
  <div id="map">
  </div>
  </div>
  <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'bottom'">
  <label for="firstname">Add a layer:</label>
  <input type="text" name="myURL" value="http://gis.brevardcounty.us/gissrv/rest/services/Base_Map/General_WKID102100/MapServer/5"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true" id="myURL" />
  <button id="progButtonNode" type="button"></button><div id="result1"></div>
  </div>
  <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
  <div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
  <div data-dojo-type="dijit/layout/ContentPane" title="Legend" selected="true">
  <div id ="LegendInHere">
   <div id="tocDiv">
  </div>
                </div>


  </div>
  <div data-dojo-type="dijit/layout/ContentPane" title="Pane 2">
  <div id="tocDiv2">
                </div>
  </div>
  </div>
  </div>
  </div>
  </body>
</html>

What I try to accomplish is that if you click on the button, the layer in the textbox is added, the current legend will be destroyed and rebuild with the new layer added. Everything works, if I change the id in line 161 to anything but the id that I destroy a line before. The problem is that I need it to be the same name. any idea what I am doing wrong?

You can test to see what I want it to look like by replacing tocDiv in line 161 and 137 to tocDiv2

Thanks!

Tim

thejuskambi · ‎06-04-2015

Have you tried to domConstruct.place with replace option?

View solution in original post

thejuskambi · ‎06-04-2015

Have you tried to domConstruct.place with replace option?

YousefQuran · ‎06-05-2015

Hi,

you can use the appendchild function to add children to a DIV, so each time you add/ remove Child ..

Hope this help you.

Regards,

Yusuf

JakeSkinner · ‎06-05-2015

Hey Tim,

I commented out the following,

toc = new TOC({
    map : map,
    layerInfos : LegendLayers
}, 'tocDiv');
toc.startup();

and the TOC was updated successfully after clicking the button. So, I believe you have to destroy the TOC widget before creating a new one. I haven't been able to figure out how to do this. I've tried using toc.destroy(), but this did not work.

TimWitt2 · ‎06-05-2015

Jake Skinner,

Since this is a 3rd party TOC widget I don't think it has a destroy function. I ended up doing it the following way.

<!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>NOAA</title>
  <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.12/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>
  <link rel="stylesheet" type="text/css" href="https://timw1984.github.io/agsjs/css/agsjs.css" />


    <style>
    html, body{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 1px;
        font-family: helvetica, arial, sans-serif;
        font-size: 90%;
  overflow: hidden;
    }
    #borderContainer {
  width: 100%;
  height: 100%;
    }
  #leftPane {
      width: 20%;
    }
  #bottomPane {
  width: 100%;
    }
  #centerPane {
  width: 100%;
  height: 100%;
    }
  #map {
  width: 100%;
  height: 100%;
    }
    </style>
  <script type="text/javascript">


                  var dojoConfig = { 
                    paths: {
                            agsjs: location.pathname.replace(/\/[^/]+$/, '') + 'https://timw1984.github.io/agsjs' 
  }
                  };
                             
     </script>


    <script src="https://js.arcgis.com/3.13/"></script>
    <script>
      var map;
      require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/parser", "agsjs/dijit/TOC","dojo/_base/connect","dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color","dijit/form/Button","esri/layers/FeatureLayer","dojo/dom-construct",
  "dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/layout/AccordionContainer","dijit/layout/ContentPane", "dijit/layout/AccordionContainer","dijit/form/TextBox","dojo/domReady!"], 
   function(Map,ArcGISDynamicMapServiceLayer, parser,TOC,connect,  dom, parser, on,Color, Button, FeatureLayer,domConstruct) {
   
  parser.parse();
        map = new Map("map", {
          basemap: "topo",  
          center: [-95.45, 37.75],
          zoom: 4
        });
  var county, toc,currentLayer,currentDiv,previouseDiv;
  var click = 0;
  var AddedLayer = "";
  var gauge = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/ahps_gauges/MapServer",{
  refreshInterval: 1,
  visible: false
  });
  var radar = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer",{
  refreshInterval: 1,
  visible: false
  });
  var hazard = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/cpc_weather_hazards/MapServer",{
  refreshInterval: 1,
  visible: false
  });

  map.addLayers([radar,hazard,gauge] );


  map.on('layers-add-result', legenddoit);


  function legenddoit(evt){
  if ( AddedLayer == "") {
  var LegendLayers = [{
  layer: hazard,
                    title: "Hazard",
  collapse: true
                },{
  layer: radar,
                    title: "Radar",
                    collapsed: true, // whether this root layer should be collapsed initially, default false.
                    slider: true,
  noLegend: true // whether to display a transparency slider.
                },{
  layer: gauge,
                    title: "Gauge",
  collapse: true,
                }];
  //radar.setVisibleLayers([0]);
  //gauge.setVisibleLayers([0]);
  //hazard.setVisibleLayers([0]);


  toc = new TOC({
  map: map,
                layerInfos: LegendLayers
            }, 'tocDiv');
            toc.startup();
  } else {
  var currentDiv = currentLayer;
  var LegendLayers = [{
  layer: hazard,
                    title: "Hazard",
  collapse: true
                },{
  layer: radar,
                    title: "Radar",
                    collapsed: true, 
                    slider: true,
  noLegend: true
                },{
  layer: gauge,
                    title: "Gauge",
  collapse: true,
                }, {
  layer: county,
                    title: "County",
  collapse: true,
                }];
  toc2 = new TOC({
  map: map,
                layerInfos: LegendLayers
            }, currentDiv );
            toc2.startup();

  }


        };
  var myButton = new Button({
  label: "Click me!",
  onClick: function(){
  click += 1;
  previouseDiv = currentDiv;
  previouseLayer = currentLayer;
  currentLayer = "layer" + click;
  console.log(currentLayer);
  if (county !== undefined){
  console.log(county);
  map.removeLayer(county);
  }
  currentDiv = "<div id=" + currentLayer +">";
  NeededValue = dom.byId("myURL").value;
  console.log(NeededValue);
  county = new FeatureLayer(NeededValue,{
  outFields: ['*']
  });
  var MyName = county.name;
  map.addLayers([county]);
  AddedLayer = "Gotem";
  if (currentLayer == "layer1"){
  domConstruct.place(currentDiv  + "<div>", 'tocDiv',"replace");
  } else {
  domConstruct.place(currentDiv + "<div>", previouseLayer,"replace");
  }
  }
    }, "progButtonNode").startup();
      });
    </script>
  </head>


  <body class ="claro">
  <div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true, liveSplitters:true">
  <div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
  <div id="map">
  </div>
  </div>
  <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'bottom'">
  <label for="firstname">Add a layer:</label>
  <input type="text" name="myURL" value="http://gis.brevardcounty.us/gissrv/rest/services/Base_Map/General_WKID102100/MapServer/5"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true" id="myURL" />
  <button id="progButtonNode" type="button"></button><div id="result1"></div>
  </div>
  <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
  <div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
  <div data-dojo-type="dijit/layout/ContentPane" title="Legend" selected="true">
  <div id ="LegendInHere">
   <div id="tocDiv">
  </div>
                </div>


  </div>
  <div data-dojo-type="dijit/layout/ContentPane" title="Pane 2">
  <div id="tocDiv2">
                </div>
  </div>
  </div>
  </div>
  </div>
  </body>
</html>

Tim