Calls at intervals using polymer's iron-ajax

Question

Calls at intervals using polymer's iron-ajax

I have a basic Polymer frontend application. I am using ajax to retrieve 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 call is successfully made at startup. When I use other iron-ajax components to make POST requests, I trigger

this.$.getAjax.generateRequest();

and it functions properly.

My question is, how can I set up a timer to automatically call this function? Essentially, I want to regularly "refresh" the page using iron-ajax. I came across some solutions on how to do it with JQuery, but I find myself getting confused with Polymer's properties, functions, internal functions, this.$, etc.

javascript ajax polymer polymer-1.0

Answer 1

Answer №1

To implement delayed tasks in Polymer, you can utilize the async() method as outlined in the official documentation:

async(method, [wait]). This function calls the specified method asynchronously. If a wait time is provided, it executes tasks with microtask timing, occurring after the current method completes but before the next event from the event queue. The function returns a handle that allows for task cancellation.

cancelAsync(handle). Use this function to cancel a specific asynchronous task using its handle.

For example, the code snippet below defines _updateData(), which triggers an AJAX request after a 2-second delay. This can be utilized within an on-response handler of an <iron-ajax> element so that the request is automatically resent 2 seconds after each response:

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

Check out the live demo below to see this functionality in action:

<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>

^{Check out the interactive demo here}

Answer 2

To implement delayed tasks in Polymer, you can utilize the async() method as outlined in the official documentation:

async(method, [wait]). This function calls the specified method asynchronously. If a wait time is provided, it executes tasks with microtask timing, occurring after the current method completes but before the next event from the event queue. The function returns a handle that allows for task cancellation.

cancelAsync(handle). Use this function to cancel a specific asynchronous task using its handle.

For example, the code snippet below defines _updateData(), which triggers an AJAX request after a 2-second delay. This can be utilized within an on-response handler of an <iron-ajax> element so that the request is automatically resent 2 seconds after each response:

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

Check out the live demo below to see this functionality in action:

<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>

^{Check out the interactive demo here}

Calls at intervals using polymer's iron-ajax

Answer №1

Similar questions

Although XPath works in Chrome, it is not compatible with Selenium

Retrieve the width of an element once the browser has finalized its dimensions

Transmit an array using a GET Request

Exploring asynchronous data handling in AngularJS using promises

Is there a way to allow users to edit all the input fields within the td elements when they click the edit button for a specific row?

Using Object Value as Variable instead of String in JavaScript/React

Tips for incorporating Emoji into a messaging platform similar to SendBird (non-native, web-based application)

Transitioning the Background Image is a common design technique

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Data is not returned following an echoed Ajax call

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Is it possible to develop a reversed version of AJAX-IE? I am looking for this specific type of functionality

Iterate through the JSON response once the AJAX call is successful

Creating a line of functions pool in Javascript with a delay feature

"Phraseapp is in the process of refreshing the primary language document

Error loading OBJ file in Three JS OBJLoader module

What steps should I follow to change the appearance of this object to match this?

"Search Functionality Failing to Perform as Intended Across Various Fields

Combining a random selection with a timer in JavaScript for a dynamic user experience

Stopping the onkeypress event after altering focus