fetchNextPage failing

[Joao_Machado]

Hi,

I’m using Airtable-js to build a website using my Airtable as a source.

Because my table has 800 records, I’ve added a click event before fetching more pages of my table, but fetchNextPage is behaving strangely. Instead of fetching regular blocks (my page limit is 36), each request seems to be multiplied by two, thus first it works, then it returns a duplicate block, and eventually it bloats to the point of hanging.

Check the code below. You can see eachPage renders more cards whenever I hit the bottom of the page.

 function updateTable () {
  table.select({
    maxRecords: 800,
    pageSize: 36,
    view: "Grid view",
    filterByFormula: filterDefault,
    sort: sortDefault}
  ).eachPage(function page(records, fetchNextPage) {

      records.forEach(function(record) {
          var rc = record.fields;
          var $dataContainer = $('#data-container');
          var $cardAlign = $('<div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2" data-toggle="modal" data-target="#myModal" />');
          if(rc.Centuries){var cent = 'c' + rc.Centuries.join("")} else {var cent = ""};
          var $galleryCard = $('<div class="card mx-auto ' + cent + '" />');
          $($galleryCard).attr('id', record.id);
          var $picture = $('<picture />');
          if (rc.Image) {
            $('<img class="card-img-top" />').attr('src', rc.Image[0].url).appendTo($picture);
          }
          var $label = $('<div class="card-body" />').text(rc.Nome);
          $galleryCard.append($picture);
          $galleryCard.append($label);
          $cardAlign.append($galleryCard);
          $dataContainer.append($cardAlign);
      });
      $(window).on('scroll', function(){
        var scrollHeight = $(document).height();
        var scrollPos = $(window).height() + $(window).scrollTop();
        if ((scrollHeight - scrollPos) / scrollHeight == 0) {
          fetchNextPage();
        }
      });

  }, function done(err) {
      if (err) { console.error(err); return; }
  });
}

[Mike_Pennisi · Accepted solution]

That code example is a little complicated, so getting it to run locally would take a fair amount of work. Although some folks may have the bandwidth to give it a shot, it’s possible that their attempt to recreate your problem would be different in some subtle way, and that would interfere with their ability to diagnose the problem.

In general, I’d recommend trying to reduce example code as much as possible. If it really requires certain dependencies (e.g. it looks like that script uses jQuery), then be sure to share exactly which version of the dependency is in use (that might be important, too).

Having said that, I can offer a guess about the problem. The code binds to the window’s scroll event, but it never unbinds. So when the user scrolls to the bottom of the screen for the very first time, the fetchNextPage function will be invoked, and the event handler will remain active. When the request completes and the API invokes your page function, it will eventually bind a second handler for the window’s scroll event. Now, with two event handlers waiting for the user to reach the bottom of the page, things are likely to go a little haywire.

One solution may be to unbind the current event handler each time the user scrolls to the bottom of the page:

-$(window).on('scroll', function(){
+$(window).on('scroll', function onScroll(){
   var scrollHeight = $(document).height();
   var scrollPos = $(window).height() + $(window).scrollTop();
   if ((scrollHeight - scrollPos) / scrollHeight == 0) {
     fetchNextPage();
+    $(window).off('scroll', onScroll);
   }
 });

[Joao_Machado]

That was it. The handler was being re-attached multiple times, and therefore, invoked multiple times. Thank you!