Atip Asvanund Atip Asvanund - 1 year ago 426
Ajax Question

Polymer iron-scroll-threshold with iron-ajax

Is there an instruction/example on how do iron-scroll-threshold with iron-ajax.

Basically, I would like iron-scroll-threshold to load more content using iron-ajax overtime scrolling reaches threshold.

However, all examples I can find resort to using javascript to load more content via AJAX. If there is a way to do it all using just iron-ajax then I can keep the code a lot cleaner.

Answer Source

Check out this JSBin for a complete example.

In short, you need to handle the iron-scroll-treshold's on-lower-threshold or on-upper-threshold event, where you call the iron-ajax's generateRequest() method. Also you need to handle the new items in the iron-ajax's on-response event.


<dom-module id="test-app">

    <iron-ajax id="ajax" 
      params='{"results": 20}'

    <iron-scroll-threshold on-lower-threshold="loadMoreData" id="threshold">
        <iron-list id="list" items="[[categoriesJobs]]" as="person" scroll-target="threshold">
            <!-- item template -->


      is: 'test-app',

      attached: function() {
        this.categoriesJobs = [];

      loadMoreData: function () {
        console.log('load more data');

      categoriesLoaded: function (e) {
        var self = this;
        var people = e.detail.response.results;
        people.forEach(function(element) {
          self.push('categoriesJobs', element);



The example based on one of my previous answer on a question related to iron-list and iron-scroll-threshold.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download