www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] assigning xml attributes to checkboxes through innerHTML

  1. #1
    Join Date
    Nov 2010
    Posts
    1,031

    resolved [RESOLVED] assigning xml attributes to checkboxes through innerHTML

    Hi,

    I'm not even sure if that's the problem here, but what I'm thinking is that if this:

    Code:
          function togglePoly(poly_num) {
            if (document.getElementById('poly'+poly_num)) {
               if (document.getElementById('poly'+poly_num).checked) {
                  gpolys[poly_num].show();
    			} else {
                  gpolys[poly_num].hide();
    			}
            }
          } 
    
          function createClickablePolyline(poly, html, label) {
            gpolys.push(poly);
            var poly_num = gpolys.length - 1;
            if (!html) {html = "";}
            else { html += "<br>";}
            if (html) {
              GEvent.addListener(poly,'click', function(point) {
                if (!point) point = poly.getVertex(Math.floor(poly.getVertexCount()/2));
                map.openInfoWindowHtml(point,html); 
              }); 
            }
            label = "<a href='javascript:GEvent.trigger(gpolys["+poly_num+"],\"click\");'>"+label+"</a>";
            // add a line to the sidebar html
            sidebar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />';
          }
    
    document.getElementById("sidebar").innerHTML = sidebar_html;
    works here to hide/show a line,

    then this:


    Code:
    function show(category) {
    		for (var a=0; a<gpolylines.length; a++) {
              if (gpolylines[a].mycategory == category) {
                gpolylines[a].show();
    		  }
            }
    		for (var i=0; i<pts.length; i++) {
    		 if (pts[i].mycategory == category) {
                pts[i].show();
    		  }
            }
    	}
    		
    function hide(category) {
    		for (var a=0; a<gpolylines.length; a++) {
              if (gpolylines[a].mycategory == category) {
                gpolylines[a].hide();
    		  }
            }
    		for (var i=0; i<pts.length; i++) {
    		 if (pts[i].mycategory == category) {
                pts[i].hide();
    		  }
            }
    	}
    	
          // this variable will collect the html which will eventually be placed in the sidebar
    function togglePoly(category) {
    if (document.getElementById(category)) {
               if (document.getElementById(category).checked) {
             show(category);
            } else {
              hide(category);
            }
          }
    }     
    
    function createClickablePolyline(poly, html, name,category) {
            gpolys.push(poly);
            var poly_num = gpolys.length - 1;
    		var category = lines[a].getAttribute("category");
     		 midLineArrows(pts, category);
            GEvent.addListener(poly,'click', function(point) {
                if (!point) point = poly.getVertex(Math.floor(poly.getVertexCount()/2));
                map.openInfoWindowHtml(point,html); 
             }); 
    		 // add a line to the sidebar html        
    		 label = "<a href='javascript:GEvent.trigger(gpolys["+poly_num+"],\"click\");'>"+label+"</a>";  
         sidebar_html += '<input type="checkbox" id="'+category+'" checked="checked" onclick="togglePoly('+category+');">' + label + '<br />';
    	  }
    
    document.getElementById("sidebar").innerHTML = sidebar_html;
    should work here to show/hide lines and arrows

    the difference of course being that the first code uses poly_num, which is taken directly from the
    Code:
    var poly_num = gpolys.length - 1;
    code (because it only needs to show/hide one line at a time) wheras the second uses the xml attribute "category" from here
    Code:
    var category = lines[a].getAttribute("category");
    because it's attempting to hide and show a line with arrows on it (the arrows being in the pts array), both of which share the category attribute.

    It's not throwing up any major errors, but it's not working, either... any ideas?

    thanks in advance...

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    At a first glance:
    Code:
    var pts = []
    for (var i=0; i< pts.length-1; i++) {
    		var category = lines[a].getAttribute("category");
    		}
    The length of the array pts is obvious 0, and the varible a is undefined. What should that loop do?

  3. #3
    Join Date
    Nov 2010
    Posts
    1,031
    ah. I wasn't sure how much code to post within the actual post, but I can see how the context is confusing. That's the bit where the arrows are assigned the same category as the lines, so that when you show a line you show its arrows, too. Here's that bit in context:

    Code:
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
    		var pts = [];
    
       for (var i=0; i< pts.length-1; i++) {
    		var category = lines[a].getAttribute("category");
    		}  
    		
    	  // read each line
    
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var geodesic = lines[a].getAttribute("geodesic");
            var name = lines[a].getAttribute("name");
    		var label = lines[a].getAttribute("name");
           var category = lines[a].getAttribute("category");
            var opacity = lines[a].getAttribute("opacity");
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            var html = GXml.value(lines[a].getElementsByTagName("infowindow")[0]);
    		
    		function createClickablePolyline(poly, html, name,category) {
            gpolys.push(poly);
            var poly_num = gpolys.length - 1;
     		 midLineArrows(pts, category);
            GEvent.addListener(poly,'click', function(point) {
                if (!point) point = poly.getVertex(Math.floor(poly.getVertexCount()/2));
                map.openInfoWindowHtml(point,html); 
             }); 
    		 // add a line to the sidebar html        
    		 label = "<a href='javascript:GEvent.trigger(gpolys["+poly_num+"],\"click\");'>"+label+"</a>";  
         sidebar_html += '<input type="checkbox" id="'+category+'" checked="checked" onclick="togglePoly('+category+');">' + label + '<br />';
    	  }
    
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                    parseFloat(points[i].getAttribute("lng")));
            }
    
            var poly = new GPolyline(pts,colour,width,opacity,[category]);
            createClickablePolyline(poly, html, name,category);
    		poly.mycategory = category;
            map.addOverlay(poly);
          }
          document.getElementById("sidebar").innerHTML = sidebar_html;
       });
    
    }
    and here you can see it working, in a slightly different way

  4. #4
    Join Date
    Nov 2010
    Posts
    1,031
    so... does the general silence on this one mean that it can't be done (in which case I can give up trying?)

    or am I asking the wrong question?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles