Iron-ajax (Polymer 1.0) on firing callback twice
Has anyone encountered ajax on-response iron related event firing twice for one request? I have double checked and I am actually sending one request. Here is my iron-ajax implementation (just the element that iron-ajax wraps):
<dom-module id="my-ajax">
<template>
<iron-ajax id="ajax" auto="{{auto}}" url="{{url}}" method="{{method}}" headers="{{headers}}" body="{{body}}" handle-as="json" content-type="application/json" on-response="responseHandler" on-error="errorHandler" with-credentials></iron-ajax>
</template>
</dom-module>
// Register the polymer element
Polymer({
is: 'my-ajax',
properties: {
actionDesc: {type: String, value: ""},
auto: {type: Boolean, value: false},
body: {type: String, value: null},
headers: {type: Object, value: null},
isBusy: {
// One-way binding setup (i.e. child to host only)
type: Boolean,
value: false,
readOnly: true,
notify: true
},
method: {type: String, value: null},
user: {type: Object, value: null},
url: {type: String, value: null}
},
generateRequest: function() {
if (!this.isBusy) {
// Execute request as it isn't currently busy processing a previous request
this.isBusy = true;
this.$.ajax.generateRequest();
} else {
// TODO: Queue up this request
}
},
responseHandler: function(e, detail) {
console.log(this.id + " responseHandler fired!\n");
this.isBusy = false;
this.fire("handle-response", detail.xhr.response);
}
});
source to share
Answer:
I think you should remove the attribute auto
and binding it from your declaration
<iron-ajax>
like this:
<iron-ajax id="ajax" url="{{url}}" method="{{method}}"
headers="{{headers}}" body="{{body}}" handle-as="json"
content-type="application/json"
on-response="responseHandler"
on-error="errorHandler" with-credentials></iron-ajax>
I think the problem is with the property "
auto
" Polymer's documentation shows an example:
<iron-ajax
auto
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handle-as="json"
on-response="handleResponse"
debounce-duration="300"></iron-ajax>
And the documentation says:
auto
{Boolean
} default:false
If true, automatically makes an Ajax request when the URL or parameters change.
So, I think that when you add the attribute "auto
", its value is automatically set to true by default even if you bind it. So I think you should remove it.
Sorry for my english, I hope you can understand me.
source to share
As mentioned by Flavio Ochoa , the attribute auto
if true will make it iron-ajax
auto-execute if the URL or params change.
To make the binding work the way you want without making the call twice, your binding must have a $
before =
in an attribute auto
, like so:
<iron-ajax
id="ajax"
auto$="{{auto}}"
url="{{url}}"
method="{{method}}"
headers="{{headers}}"
body="{{body}}"
handle-as="json"
content-type="application/json"
on-response="responseHandler"
on-error="errorHandler"
with-credentials>
</iron-ajax>
In Polymer Papers, the auto attribute, if linked like this, will only be set if the anchor value is true
A bit late to the party, but hope this helps someone
source to share