How to trigger iron-ajax on button click in Polymer-3.x?

Question

I am creating a polymer element which uses iron-ajax. This will hit a public API to fetch a random fox imageUrl and dispaly in DOM.

Requirement

On clicking button, i want to make a new call to the api, this will give me new url. Currently i am using <button type="button" onClick="window.location.reload();">. but this refreshes page.

Problem

I went through this StackOverflow solution and changed it to version-3 solution.

class MyFox extends PolymerElement {
  static get template() {
    return html`
      <dom-bind>
      <template id="temp"> 
          <iron-ajax
            auto
            id="dataAjax"
            url=""
            handle-as="json"
            on-response="handleResponse"
            id="apricot">
          </iron-ajax>

          <button type="button" onClick="window.location.reload();">Next Image</button>
          <br> <br>
          <img src="[[imgUrl]]" width="300">
      </template>
      </dom-bind>
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-fox',
      },
      imgUrl: {
        type: String,
      }
    };
  }
  handleResponse(event, res) {
    this.imgUrl = res.response.image; 
  }
  nextImg() {
    // new call to iron-ajax for new image
    var temp = document.querySelector('#temp');
    temp.$.dataAjax.generateRequest();
  }
}

window.customElements.define('my-fox', MyFox);

But i am getting the following error. listener method handleResponse not defined

Question

How to manually trigger iron-ajax on button click, so I can get new response or imageUrl and the page is not refreshed?

score 1 · Accepted Answer · edited Aug 29 '18 at 13:41

1

There are a couple errors in your web component

class MyFox extends PolymerElement {
  static get template() {
    return html`
          <iron-ajax
            auto
            id="dataAjax"
            url=""
            handle-as="json"
            on-response="handleResponse">
          </iron-ajax>

          <button type="button" on-tap="nextImg">Next Image</button>
          <br> <br>
          <img src="[[imgUrl]]" width="300">
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-fox',
      },
      imgUrl: {
        type: String,
      }
    };
  }
  handleResponse(event, res) {
    this.imgUrl = res.response.image; 
  }
  nextImg() {
    // new call to iron-ajax for new image
    this.$.dataAjax.generateRequest();
  }
}

window.customElements.define('my-fox', MyFox);

edited Aug 29 '18 at 13:41

Hyyan Abo Fakher

3,497
3
21
35

answered Aug 28 '18 at 11:22

Pascal L.

1,261
9
21

@pascal thanks for taking out time and providing the solution :) – Raj Aug 30 '18 at 11:27
need to change event from on-tap to `on-click` for the code to work. the edit was pending, so adding as comment here. – Raj Aug 30 '18 at 13:19
no as i state in my edit reject it is better to use tap with polymer since tap does mobile click as well with desktop click. – Pascal L. Aug 30 '18 at 18:10
1

@PascalL. Polymer 1 had [recommended listening to `tap`](https://www.polymer-project.org/1.0/docs/devguide/events#annotated-listeners) instead of `click` for cross-platform consistency, but this recommendation was [dropped in Polymer 2](https://www.polymer-project.org/2.0/docs/devguide/gesture-events), as it's no longer needed in modern mobile browsers. – tony19 Sep 03 '18 at 01:16

How to trigger iron-ajax on button click in Polymer-3.x?

1 Answers1