Advertisement

08.14.2008 at 12:20PM PDT, ID: 23649361 | Points: 500
[x]
Attachment Details

Get rid of commas in List

Asked by flfmmqp in JavaScript

I am creating a list that has checkboxes and then lables them but they keep showing up with commas.  Not sure where in my code this is happening but I need to get rid of them.  I think it might be here.  

      function buildLayerList(layer) {
        var infos = layer.layerInfos, info;
        var items = [];
        for (var i=0, il=infos.length; i<il; i++) {
          info = infos[i];
          if (info.defaultVisibility) {
            visible.push(info.id);
          }
            items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>";
        }
        dojo.byId("layer_list").innerHTML = items.join();

        layer.setVisibleLayers(visible);
        map.addLayer(layer);
      }

How do I get rid of the commas?Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stores Layer Test 1</title>
<!--    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
-->
 
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css";
      .zoominIcon { background-image:url(images/Zoom_In_16.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/Zoom_Out_16.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/Full_Extent_A_16.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/Zoom_Back_16.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/Zoom_Forward_16.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/hand_16.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/decline16.png); width:16px; height:16px; }
    </style>
    
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
 
 
    <script type="text/javascript">
     dojo.require("esri.map");
     dojo.require("esri.toolbars.navigation");
 
     dojo.require("dijit.form.Button");
     dojo.require("dijit.Toolbar");
 
     var map, navToolbar;
      var layer, map, visible = [];
 
      function init() {
      esriConfig.defaults.map.sliderLabel = null;
         map = new esri.Map("map");
        //layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ho000xd3840571/ArcGIS/rest/services/macys_stores2/MapServer");
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ho000xd3840571/ArcGIS/rest/services/macys_stores5/MapServer");
         navToolbar = new esri.toolbars.Navigation(map);
 
        if (layer.loaded) {
          buildLayerList(layer);
        }
        else {
 
         dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
//         dojo.connect(layer, "onLoad", buildLayerList);
        }
      }
 
 
 
 
 
      function buildLayerList(layer) {
        var infos = layer.layerInfos, info;
        var items = [];
        for (var i=0, il=infos.length; i<il; i++) {
          info = infos[i];
          if (info.defaultVisibility) {
            visible.push(info.id);
          }
            items[i] = "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>";
        }
        dojo.byId("layer_list").innerHTML = items.join();
 
        layer.setVisibleLayers(visible);
        map.addLayer(layer);
      }
 
      function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;
        visible = [];
        for (var i=0, il=inputs.length; i<il; i++) {
          if (inputs[i].checked) {
            visible.push(inputs[i].id);
          }
        }
        layer.setVisibleLayers(visible);
      }
      
      function extentHistoryChangeHandler() {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }
      
      dojo.addOnLoad(init);
    </script>
 
 
  </head>
  <body>
      <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>
    </div>
 
      <br />
      <table>
          <tr>
              <td style="width: 100px">
    <div id="map" class="tundra" style="width:800px; height:600px; border:1px solid #000;"></div>
                  C:\Inetpub\wwwroot\JavaScriptAPI\Macys_Stores_Toolbar.htm</td>
              <td style="width: 208px">
                  <span style="text-decoration: underline"><strong>
                Layer List :</strong><br />
                  </span>
              <span id="layer_list"></span>
              </td>
          </tr>
      </table>
 
 
  </body>
</html>
[+][-]08.14.2008 at 12:32PM PDT, ID: 22233501

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]08.14.2008 at 12:52PM PDT, ID: 22233684

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]08.14.2008 at 02:42PM PDT, ID: 22234558

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628