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 disappearingjQuery:<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();
}
