topic update grid inside jQuery Tabs in ArcGIS JavaScript Maps SDK Questions

update grid inside jQuery Tabs

jaykapalczynski — Sun, 12 Dec 2021 15:58:33 GMT

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

Re: update grid inside jQuery Tabs

jaykapalczynski — Thu, 20 Feb 2014 20:27:21 GMT

If there is another way to accomplish this can you shed some light on that...some sort of a tab box that i can feed multiple datasets returns to
Basically what I am doing is running a couple queries on the user click, returning 3 sets of data. I want each set to go into each Tab and corresponding Grid in the tab...
That make any sense?

Re: update grid inside jQuery Tabs

jaykapalczynski — Fri, 21 Feb 2014 15:06:17 GMT

Any examples out there that return grids to Tabs to contain multiple data returns from multiple queries
Any help would be appreciated.

Re: update grid inside jQuery Tabs

jaykapalczynski — Fri, 10 Dec 2021 22:16:15 GMT

This is how I am creating my grid in JavaScript.
Is there a way to encapsulate this grid in a Tab , and have multiple grids, once for each Tab

What, if any, are my options to get multiple returns into some sort of Tab controlled window that I can run multiple query's on each map click and return the values to the grids in the Tabs...I can sort of do this but when I click another Tab and go back the grid is gone
Thanks

  // create a dgrid 
      var sortAttr = [{
        attribute: "NAME",
        descending: true
      }];
      grid = new OnDemandGrid({
        store: Memory({
          idProperty: "NAME"
        }),
        columns:{
          NAME: "SiteNames",
          REGION: "Regions",
          WATERBODY: "Waterbody",
          TYPE: "Type",
          ACCESSAREA: "Access",
          LOCATION: "Location",
       },
        sort: sortAttr
      }, "grid");

Re: update grid inside jQuery Tabs

KenBuja — Mon, 24 Feb 2014 13:03:38 GMT

Hi Jay,

I have an application that uses grids in a Tab Container to hold the results of an IdentifyTask. The results for each visible layer are put into a separate grid on its own tab. You can see it in action here.

Another example is Tracy Schloss's excellent Missouri Legislative Analysis page

Re: update grid inside jQuery Tabs

jaykapalczynski — Mon, 24 Feb 2014 13:12:56 GMT

Thats exactly what I am trying to achieve although I am not doing an identify but a map click and buffer to query returning results back to a tab control. Any examples of your work? Or a reference of how you did that? I used the standard Grid reference from ESRI JS api but it did not show tabs...I went to a JS page and created one with jQuery but every time I leave that tab and go back my grid vsanishes...sort of confused...would be greatly interested in seeing how you did that if you care to share (JSFiddler)....or at least point me in the direction of an example
Appreciate your feedback

Re: update grid inside jQuery Tabs

KenBuja — Mon, 24 Feb 2014 13:35:21 GMT

You can see the code for the applications by using Ctrl-U (View source). I also have a Fiddle that I created to work out some issues with the code. The Fiddle doesn't format the tabs correctly, but most everything else works properly.