Polymer iron-ajax: How can I send value to an argument of a function

Question

First of all I want to say sorry for not-so-good title for this post. I could not think of anything better!

I am trying with iron-ajax. When I enter a value in my iron-input element and click on a button I get result fine. Now each record in the result has a link which is supposed to drill down more into the item itself.

To get first set of result I have done the following (which works fine):

 <iron-ajax id="ajax"
  handle-as="json"
  on-response="hresponse"
  last-response="{{data}}"
  debounce-duration="300">
  </iron-ajax>
  <input is="iron-input" id="txtSearchItemsByName"/>
  <button on-click="findItems">Search &raquo;</button>
  <span id="waiting"></span>
  <template is="dom-repeat" items="{{data}}">
    <div>
      <span>
        <input id="itemId" value="{{item.id}}"/>
        <a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
              </span>
    </div>
  </template>

Following code block fetches all records which match the name entered by user

 findPlants: function () {
  var thisAjax = this.$.ajax;
  var waitingContainer = this.$.waiting;

  waitingContainer.innerHTML = "Please wait...";

  var strEnc = encodeURIComponent(this.$.txtSearchItemByName.value);
  this.$.ajax.url = "//domain.com/api/v0/items/search";
  this.$.ajax.params = { "apikey": "xxxxxxxxxxx", "common_name": strEnc };
  window.setTimeout(function () {
    thisAjax.generateRequest();
    waitingContainer.innerHTML = "";
  }, 1000);
},

hresponse: function (request) {
  data = this.$.ajax.lastResponse;
},

Up to this point everything works fine. Then I went on and created another function which is supposed to take an argument:

 itemDetail: function (id) {
  var thisAjax = this.$.ajax;
  var waitingContainer = this.$.waiting;
  waitingContainer.innerHTML = "Please wait...";

  this.$.ajax.url = "//domain.com/api/v0/item/search";
  this.$.ajax.params = { "apikey": "xxxxxxxxxx", "id": id };
  window.setTimeout(function () {
    thisAjax.generateRequest();
    waitingContainer.innerHTML = "";
  }, 1000);
},

And I expect the following line to do my job:

<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

However, when I am clicking on the link I am getting the following error message and nothing is happening:

[iron-ajax-caller::_createEventHandler]: listener method itemDetail( {{item.id}} ) not defined

I have no idea what to do from here as I am still a newbie at Polymer.

Experts please help!

Thanks in advance, Subrata

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

Use on-tap instead of on-click:

<a on-tap="_itemDetail" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

Then in your function:

_itemDetail: function(e) {
  var thisAjax = this.$.ajax, waitingContainer = this.$.waiting;

  thisAjax.url = '//domain.com/api/v0/item/search';
  thisAjax.params = { apikey: 'xxxxxx', id: e.model.item.id };

  this.async(function() {
    thisAjax.generateRequest();
    waitingContainer.innerHTML = '';
  }, 1000);
}

See documentation here for more info

As to why on-tap, check this out

edited May 23 '17 at 12:06

Community

1
1

answered Sep 26 '15 at 19:26

romerk

238
1
2
7

Worked perfectly! Would you please explain the difference between passing a value directly as _itemDetail: function(id) and _itemDetail: function(e). When I was sending as {{itemDetail(item.id)}} it didn't work. How e.model.item.id is different from item.id? – Subrata Sarkar Sep 30 '15 at 05:42

score 0 · Answer 2 · answered Sep 25 '15 at 12:12

I believe you made a simple mistake, if I'm not totally wrong. This:

<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

should look like this:

<a on-click="{{itemDetail(item.id)}}" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

I think it should work. Polymer 1.0 doesn't support string concatenation. In your case it can't put these together "itemDetail(" + item.id + ")". And therefore the syntax is as I described above.

Didn't work. Rmrk.Ian's solution however resolves the issue. — Subrata Sarkar, Sep 30 '15 at 05:46

Etienne Martinet · Answer 3 · 2015-09-26T06:42:37.557

-1

<a on-click="itemDetail" data$="{{item.id}}" title="{{item.plantid}}">{{item.title}}</a>

itemDetail : function(e){
    console.log(e.target.getAttribute("data"));
}

edited Sep 26 '15 at 06:42

answered Sep 25 '15 at 12:26

Etienne Martinet

1
1

Polymer iron-ajax: How can I send value to an argument of a function

3 Answers3