RubenDFC RubenDFC - 17 days ago 8
Javascript Question

How to mutate Polymer v1.x property inside ajax request

I+m trying to populate an array based in thr results that I fetch from an Ajax request via iron-ajax
When I try to Access to my property, my watch window displays "not available"

Below is an little example I recreated for explain my issue:

my-component.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">


<dom-module id="my-component">
<template>
<div>
<paper-dropdown-menu
id="location" label="Ubicaci&oacute;n"
value="{{vehicle.location}}">
</paper-dropdown-menu>
<paper-dropdown-menu id="city" label="Ciudad">
<paper-menu
class="dropdown-content"
selected="{{city.city_code}}"
attr-for-selected="value"
on-iron-select="estadoSeleccionado">
<template id="" is="dom-repeat" items="[[opcionesDisponibilidad]]" as="i">
<paper-item value="[[i.valor]]">[[i.texto]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</div>
<iron-ajax
id="ajax"
method="GET"
url="http://localhost:8080/ws.asmx"
params=""
content-type="application/x-www-form-urlencoded; charset=UTF-8"
handle-as="text"
on-response="handlecities"
debounce-duration="300">
</iron-ajax>
<app-localstorage-document id="localStorageElement" key="myapp.login_data" data="{{loginInfo}}"></app-localstorage-document>
</template>
<script>
Polymer({
is: "my-component",
properties:{
vehicle: {
type: Object,
value:{
id: "",
plate: "",
location: ""
}
},
cities:{
notify: true,
type: Array,
value: [{city_code:'0', city_name:'-'}]
}
},
ready:function () {
this.querycities();
},
querycities: function () {
if (this.$.localStorageElement.storage['myapp.login_data']){
this.$.loginInfo = JSON.parse(this.$.localStorageElement.storage['myapp.login_data']);
} else return false;
this.$.ajax.url = this.$.ajax.url + "/listadoCiudades";
this.$.ajax.verbose = true;
this.$.ajax._boundHandleResponse = this.handlecities;
this.$.ajax.params = {dispositivo:'12345', credencial: this.$.loginInfo.cred};
this.$.ajax.generateRequest();
},
handlecities: function (request) {
console.log(request.response);
var xPath = new SoftXpath();
xPath.registerNamespace("","");
xPath.loadXML(request.response);
var cities = xPath.selectNodes("//Ciudad//*[self::Codigo|self::Nombre]");
var xPathElement = new SoftXpath();
if (cities){
for(var i = 1; i < cities.length;i++){
var c = new Object();
c.Codigo = cities[i-1].text;
c.Nombre = cities[i].text;

this.$.cities.push(c);// <---- Here I have not access to my polymer property ' cities '.

//How to update my polymer var cities ??
//Tried also with:
// this.cities --> undefined
// this.$$('#myassignedId').cities --> undefined
}
}
}
})
</script>
</dom-module>


How can I populate my 'cities' property if appears out of scope ?

Answer

Well, After too many try-error variations, finally I found the cause of error.

Line 65:

this.$.ajax._boundHandleResponse = this.handlecities;

Removed that line and all my polymer attributes returned to normality.

I was using that sentence because I was trying to reuse the component for several ajax requests. 'handlecities' is specified as attribute as well, so is redundant (only when there are no intentions of reuse). I still don´t know how to reuse the component defining a custom handler, but for some reason if i use the above sentence, all polymer properties are lost.

So, in the meantime I´m defining several ajax components one for each ajax request

Comments