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

  $.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();
        toggler = "#" + obj.attr("data-toggle");
        togglerRest = $(toggler).parent().find("div");

        //toggle Active Class on tab buttons

        return false; //Stop event Bubbling and PreventDefault

$(document).ready(function() {
  $(".tabs a").html5Tabs();


<div id="mapDiv">

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

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

//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) {
      function updateGrid(featureSet) {
        var data =, 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