AnsweredAssumed Answered

update grid inside jQuery Tabs

Question asked by jay.kapalczynski on Feb 20, 2014
Latest reply on Feb 24, 2014 by kenbuja
I have a test site that is allowing the user to select a point on the map, it then draws a buffer and selects points inside, then returns those results to a Grid. Everything is working great.
Until I tried to move this grid into a Tab driven by jQuery. Initially when I open the page I can see the grid in the first tab, but when I click another tab and go back to the first the Grid is gone...
Not sure how I can get the grid back...any thoughts? Not sure why the grid is disappearing

jQuery:
<script>
;(function($){
  $.fn.html5Tabs = function(options){
    return this.each(function(index, value){
      var obj = $(this),
      objFirst = obj.eq(index),
      objNotFirst = obj.not(objFirst);
     
      $("#" +  objNotFirst.attr("data-toggle")).hide();
      $(this).eq(index).addClass("active");
     
      obj.click(function(evt){
       
        toggler = "#" + obj.attr("data-toggle");
        togglerRest = $(toggler).parent().find("div");
       
        togglerRest.hide().removeClass("active");
        $(toggler).show().addClass("active");

        //toggle Active Class on tab buttons
        $(this).parent("div").find("a").removeClass("active");
        $(this).addClass("active");

        return false; //Stop event Bubbling and PreventDefault
      });
    });
  };
}(jQuery));

$(document).ready(function() {
  $(".tabs a").html5Tabs();
});
</script>



HTML:

<div id="mapDiv">
</div>

<div class="tabs">
    <a data-toggle="tab1">Tab1</a>
    <a data-toggle="tab2">Tab2</a>
    <a data-toggle="tab3">Tab3</a>
</div>
<div class="tabContent"> 
  <div id="tab1">
    <h5>Tab1</h5>
    <div id="infotab">
      <div id="grid" style="Height:250px";></div>
    </div>
  </div>
  <div id="tab2">
    <h5>Tab2</h5>
</div>
  <div id="tab3">
    <h5>Tab3</h5>
  </div>
</div>



JavaScript:
        
     //SNIP
          geometryService.on("buffer-complete", function(result){
          map.graphics.clear();
          // draw the buffer geometry on the map as a map graphic
          var symbol2 = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([105,105,105]),
              2
            ),new Color([255,255,0,0.25])
          );
          var bufferGeometry = result.geometries[0]
          var graphic = new Graphic(bufferGeometry, symbol2);
          map.graphics.add(graphic);

//Select features within the buffered polygon. To do so we'll create a query to use the buffer graphic
          //as the selection geometry.
          var query = new Query();
          query.geometry = bufferGeometry;
   // Select the Points within the Buffer and show them
          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

          });
    
          // Query for the records with the given object IDs and populate the grid
          featureLayer.queryFeatures(query, function (featureSet) {
            updateGrid(featureSet);
          });                                  
      });
 
      function updateGrid(featureSet) {
        var data = arrayUtils.map(featureSet.features, function (entry, i) {
          return {
            NAME: entry.attributes.SITENAME,
            REGION: entry.attributes.REGION,
            WATERBODY: entry.attributes.WATERBODY,
            TYPE: entry.attributes.TYPE,
            ACCESSAREA: entry.attributes.ACCESSAREA,
            LOCATION: entry.attributes.LOCATION
          };
        });
        grid.store.setData(data);
        grid.refresh();
      }

Outcomes