Result list is not being displayed (google-fusion-tables template derek)

Question

I am trying to make a searchable map with the great template Derek made.

I have tried everything but somehow I do not manage to get my result list to display. Div is visible but no results. Hope someone can help me. I followed these instructions:

This is part of the index

<a class='btn btn-primary' id='search' href='#'>
          <i class='glyphicon glyphicon-search'></i>
          Zoeken
        </a>
        <a class='btn btn-default' id='reset' href='#'>
          <i class='glyphicon glyphicon-repeat'></i>
          Reset
        </a>
      </div>
      <div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
       <div class='well'> <div id='results_list'></div> </div>
    </div>
    <div class='col-md-8'>
      <noscript>
        <div class='alert alert-info'>
          <h4>Your JavaScript is disabled</h4>
          <p>Please enable JavaScript to view the map.</p>
        </div>
      </noscript>
      <div id='map_canvas'></div>

And this the maps_lib.js

submitSearch: function(whereClause, map, location) {
//get using all filters
//NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
//you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
//for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles

MapsLib.searchrecords = new google.maps.FusionTablesLayer({
  query: {
    from:   MapsLib.fusionTableId,
    select: MapsLib.locationColumn,
    where:  whereClause
  },
  styleId: 2,
  templateId: 2
});
MapsLib.searchrecords.setMap(map);
MapsLib.getCount(whereClause);
MapsLib.getList(whereClause);},

And this:

    getCount: function(whereClause) {
    var selectColumns = "Count()";
    MapsLib.query(selectColumns, whereClause, "", "", "MapsLib.displaySearchCount");
  },

  displaySearchCount: function(json) {
    MapsLib.handleError(json);
    var numRows = 0;
    if (json["rows"] != null)
      numRows = json["rows"][0];

    var name = MapsLib.recordNamePlural;
    if (numRows == 1)
    name = MapsLib.recordName;
    $( "#result_box" ).fadeOut(function() {
        $( "#result_count" ).html(MapsLib.addCommas(numRows) + " " + name + " gevonden");
      });
    $( "#result_box" ).fadeIn();
  },

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

displayList: function(json) {
  MapsLib.handleError(json);
  var data = json["rows"];
  var template = "";

  var results = $("#results_list");
  results.hide().empty(); //hide the existing list and empty it out first

  if (data == null) {
    //clear results list
    results.append("<li><span class='lead'>No results found</span></li>");
  }
  else {
    for (var row in data) {
      template = "\
        <div class='row-fluid item-list'>\
          <div class='span12'>\
            <strong>" + data[row][0] + "</strong>\
            <br />\
            " + data[row][1] + "\
            <br />\
            " + data[row][2] + "\
            <br />\
            " + data[row][3] + "\
          </div>\
        </div>"
      results.append(template);
    }
  }
  results.fadeIn();
},

score 0 · Answer 1 · answered Jun 25 '14 at 09:18

The problem seems to be in this function:

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

I think it should be represented like this:

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats ";
  MapsLib.query(selectColumns, whereClause, "", "", "MapsLib.displayList");
},

score 0 · Answer 2 · answered Dec 04 '17 at 20:20

I don’t know if you are still looking for an answer to this question but maybe somebody else is as they browse these topics. Using Derek’s awesome template – Here is the code I used to create the container box on the main (index) page.

<div class='well'>
  <div class="scrollr" id='results_list'></div>
</div>

Note: I added the “scrollr” reference and created the code for it in the “custom.css” file. This simply puts a border around the result list box and makes it scrollable. Here is style code I added to the custom.css file:

.scrollr {
    height: 400px;
    overflow: scroll;
    border-style: solid;
    border-color: darkgray;
    background-color: lightgray;
}

Finally, here is the code I added to the “maps_lib.js” file after the “displaySearchCount” function. //DISPLAY RESULTS FUNCIION----------------------------------------------------------------------------------------

MapsLib.prototype.getList = function(whereClause) {
    var self = this;
    var selectColumns = 'Column1, Column2, Column3, Column4, Column5';

    self.query({ 
      select: selectColumns, 
      where: whereClause 
    }, function(response) { 
      self.displayList(response);
     });


  },

  MapsLib.prototype.displayList = function(json) {
    var self = this;

    var data = json['rows'];
    var template = '';

    var results = $('#results_list');
    results.hide().empty(); //hide the existing list and empty it out first

    if (data == null) {
      //clear results list
      results.append("<li><span class='lead'>No results found</span></li>");
    }
    else {
      for (var row in data) {
        template = "\
          <div class='row-fluid item-list'>\
            <div class='span12'>\
              <strong>" + data[row][0] + "</strong>\
              <br />\
              " + data[row][1] + "\
              <br />\
              " + data[row][2] + "\
              <br />\
              " + data[row][3] + "\
               <br />\
              " + data[row][4] + "<br>\
            </div>\
          </div>";
        results.append(template);
      }
    }
    results.fadeIn();
  },

Hope this helps someone.

Result list is not being displayed (google-fusion-tables template derek)

2 Answers2