Mathter Mathter - 6 months ago 357
Ajax Question

Polymer iron-ajax interval calls

I have a simple Polymer frontend app. In it, I have simple ajax to get data from the backend:

<iron-ajax id="getAjax"
auto
url="http://localhost:14039/InvoiceService/envelop/{{envelopId}}/invoices"
handle-as="json"
last-response="{{invoices}}">


The ajax gets called at startup and works. Whenever I POST using other iron-ajaxes I call
this.$.getAjax.generateRequest();
and it works.

Question is, how can I call this function using some sort of timer. The idea here is to "refresh" the page using iron-ajax.
I saw some answers on how to do it on JQuery, but I get confused with Polymers properties vs functions vs internal functions vs this.$ etc.

Answer

You would use Polymer's async() method, as described in the docs:

  • async(method, [wait]). Calls method asynchronously. If no wait time is specified, runs tasks with microtask timing (after the current method finishes, but before the next event from the event queue is processed). Returns a handle that can be used to cancel the task.

  • cancelAsync(handle). Cancels the identified async task.

The following example defines _updateData() that asynchronously re-sends the AJAX request after 2 seconds. This could be called inside an on-response handler of <iron-ajax> so that the request is resent 2 seconds after every response.

Polymer({
  is: 'x-foo',
  _updateData: function() {
    this.async(function() {
      this.$.ajax.generateRequest();
    }, 2000);
  },
  _onResponse: function() {
    this._updateData();
  }
});

Here's a working demo:

<head>
  <base href="http://polygit.org/polymer+1.4.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="https://cdn.rawgit.com/PolymerElements/iron-ajax/v1.2.0/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax id="ajax"
                 auto
                 url="http://jsonplaceholder.typicode.com/users/"
                 last-response="{{data}}"
                 on-response="_onResponse"
                 handleAs="json">
      </iron-ajax>
      <table>
        <template is="dom-repeat" items="[[data]]">
          <tr>
            <td>[[item.id]]</td>
            <td>[[item.name]]</td>
            <td>[[item.email]]</td>
          </tr>
        </template>
      </table>
      <div>
        <sup>See console log</sup>
      </div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _updateData: function() {
            this.async(function() {
              this.$.ajax.generateRequest();
            }, 2000);
          },
          _onResponse: function() {
            console.log('received response');
            this._updateData();
          }
        });
      });
    </script>
  </dom-module>
</body>

jsbin

Comments