CODEWITHSUNDEEP
javascriptajaxpolymerpolymer-1.0
Mathter
Mathter

Reputation: 747

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.

Upvotes: 2

Views: 3650

Answers (1)

tony19
tony19

Reputation: 138226

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="https://polygit.org/polymer+1.11.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax id="ajax"
                 auto
                 url="//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

Upvotes: 10

Related Questions