title: Algolia Search adding infinite scroll
body: <p>I am working on Algolia search and adding infinite scroll following <a href="https://www.algolia.com/doc/guides/search/infinite-scroll#adding-our-infinite-scroll" rel="nofollow noreferrer">this tutorial</a>. I have simply copied the code given their but it seems I have missed something. I am getting an error when a request is sent for infinite scroll. Please see following code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Infinite Scroll Instant Search Example&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
  &lt;a href="/"&gt;&lt;img src="img/instant_search_logo@2x.png"/&gt;&lt;/a&gt;
  &lt;input id="search-input" type="text" placeholder="Search for products"/&gt;
  &lt;div id="search-input-icon"&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;main&gt;
  &lt;div id="right-column"&gt;
  &lt;div id="hits"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;script src="js/instantsearch.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/mustache.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/infinite_scroll.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/html" id="hits-template"&gt;
   &lt;div class="hits"&gt;
   {{#pageNo}}
    &lt;div class="page-no"&gt;
      Page {{pageNo}}
    &lt;/div&gt;
  {{/pageNo}}
  {{#hits}}
    &lt;div class="hit"&gt;
      &lt;a href="{{url}}"&gt;
        &lt;img src="{{image}}" alt="{{name}}"&gt;
        &lt;p class="name"&gt;
          {{#_snippetResult}}
            {{{_snippetResult.name.value}}}
          {{/_snippetResult}}
          {{^_snippetResult}}
            {{name}}
          {{/_snippetResult}}
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  {{/hits}}
  &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/html" id="no-results-template"&gt;
  &lt;div id="no-results-message"&gt;
  &lt;p&gt;We didn&amp;rsquo;t find any results for the search &lt;em&gt;&amp;ldquo;{{query}}&amp;rdquo;&lt;/em&gt;&lt;/p&gt;
  &lt;a href="#" class="clear-all"&gt;Clear all&lt;/a&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And following is my script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var search = instantsearch({
    appId: 'AJUBPPRF41',
    apiKey: '3cecdb91586ac2ac0d59f1355481f472',
    indexName: 'getstarted_actors',
    searchParameters: {
      attributesToSnippet: 'name:9'
    },
    urlSync: {
      useHash: true
    }
  });
  
  var searchBoxWidget = instantsearch.widgets.searchBox({
   container: '#search-input'
  });
  
  var infiniteScrollWidget = infiniteScrollWidget({
  container: '#hits',
   templates: {
  items: document.querySelector('#hits-template').innerHTML,
  empty: document.querySelector('#no-results-template').innerHTML
  }
  });
  
  search.addWidget(searchBoxWidget);
  search.addWidget(infiniteScrollWidget);
  search.start();
  
  var cursor, index, page, nbPages, loading;
  
  var infiniteScrollWidget = function(options){
  var container = document.querySelector(options.container);
  var templates = options.templates;
  
  if(!container) {
  throw new Error('infiniteScroll: cannot select \'' + options.container + '\'');
  }
  return {
  init: function(){},
  render: function(args) {
  var scope = {
    templates: templates,
    container: container,
    args: args,
    offset: offset
  };
  
  if(args.results.nbHits) {
    window.addEventListener('scroll', searchNewRecords.bind(scope));
  }
    initialRender(container, args, templates);
  }
  };
  };
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var cursor, index, page, nbPages, loading;
  
  var hitsDiv = document.getElementById('hits');
  
  var scrolledNearBottom = function(el){
   return (el.scrollHeight - el.scrollTop) &lt; 850;
  };
  
  var searchNewRecords = function(){
  if(scrolledNearBottom(document.querySelector('body'))) {
   addSearchedRecords.call(this);
  }
  };
  
  var addSearchedRecords = function(){
  if(!loading &amp;&amp; page &lt; nbPages - 1) {
  loading = true;
  page += 1;
  helper.searchOnce({page: page}, appendSearchResults.bind(this));
  }
  };
  
  var appendSearchResults = function(err, res, state){
  page = res.page;
  args.results.pageNo = page + 1; // Here I get error saying args is not defined
  loading = false;
  
  var result = renderTemplate(this.templates.items, res);
  this.container.appendChild(result);
  
  if(page === nbPages - 1 &amp;&amp; (this.args.results.nbHits &gt; nbPages * this.args.results.hitsPerPage)){
   index = helper.client.initIndex(this.args.state.index);
   window.removeEventListener('scroll', searchNewRecords.bind(this));
   window.addEventListener('scroll', browseNewRecords.bind(this));
   addBrowsedRecords.call(this);
  }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I get error inside appendSearchResults method saying args is not defined. I can see I have repetitive code here but I am not sure what to remove and what to add. Please guide.</p>