title: Polymer iron-ajax: How can I send value to an argument of a function
body: <p>First of all I want to say sorry for not-so-good title for this post. I could not think of anything better!</p>
  
  <p>I am trying with <code>iron-ajax</code>. When I enter a value in my <code>iron-input</code> 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.</p>
  
  <p>To get first set of result I have done the following (which works fine):</p>
  
  <pre><code> &lt;iron-ajax id="ajax"
    handle-as="json"
    on-response="hresponse"
    last-response="{{data}}"
    debounce-duration="300"&gt;
    &lt;/iron-ajax&gt;
    &lt;input is="iron-input" id="txtSearchItemsByName"/&gt;
    &lt;button on-click="findItems"&gt;Search &amp;raquo;&lt;/button&gt;
    &lt;span id="waiting"&gt;&lt;/span&gt;
    &lt;template is="dom-repeat" items="{{data}}"&gt;
      &lt;div&gt;
        &lt;span&gt;
          &lt;input id="itemId" value="{{item.id}}"/&gt;
          &lt;a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}"&gt;{{item.title}}&lt;/a&gt;
                &lt;/span&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  </code></pre>
  
  <p>Following code block fetches all records which match the name entered by user</p>
  
  <pre><code> 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;
  },
  </code></pre>
  
  <p>Up to this point everything works fine. Then I went on and created another function which is supposed to take an <code>argument</code>:</p>
  
  <pre><code> 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);
  },
  </code></pre>
  
  <p>And I expect the following line to do my job:</p>
  
  <pre><code>&lt;a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}"&gt;{{item.title}}&lt;/a&gt;
  </code></pre>
  
  <p>However, when I am clicking on the link I am getting the following error message and nothing is happening:</p>
  
  <p>[iron-ajax-caller::_createEventHandler]: listener method <code>itemDetail( {{item.id}} )</code> not defined</p>
  
  <p>I have no idea what to do from here as I am still a newbie at Polymer.</p>
  
  <p>Experts please help!</p>
  
  <p>Thanks in advance,
  Subrata</p>