Assigning url property to Polymer iron-ajax only works in Blink browsers

Question

I'm using Polymer 1.0 to make an API request using iron-ajax based on the user's location.

In app.js I have the following block.

app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');

var working = Polymer.dom(document).querySelector('#refresh-button');
var locationToast = Polymer.dom(document).querySelector('#toast');
var sightingsAjax = Polymer.dom(document).querySelector('iron-ajax#sightings');
var hotspotsAjax = Polymer.dom(document).querySelector('iron-ajax#hotspots');

function getLocation() {

  working.setAttribute('class', 'spin');  

  function success(position) {

    app.initialPosition = [position.coords.latitude,position.coords.longitude];
    console.log(app.initialPosition);

    app.apiRecent = 'http://ebird.org/ws1.1/data/obs/geo/recent?fmt=json&back=2' + 
      '&lat=' + app.initialPosition[0] + '&lng=' + app.initialPosition[1];
    console.log(app.apiRecent);

    app.apiHotspots = 'http://ebird.org/ws1.1/ref/hotspot/geo?dist=20&back=2&fmt=json' + 
      '&lat=' + app.initialPosition[0] + '&lng=' + app.initialPosition[1];
    console.log(app.apiHotspots);

    locationToast.text = 'Location acquired!';
    locationToast.show();

    working.removeAttribute('class'); 

    sightingsAjax.url = app.apiRecent;
    hotspotsAjax.url = app.apiHotspots;

  }

  function error() {

    working.removeAttribute('class');
    working.setAttribute('icon', 'error'); 

    locationToast.text = 'Unable to determine location.' + 
        'Please check your settings and try again.';
    locationToast.duration = 0; 
    locationToast.show(); 

  }

  navigator.geolocation.getCurrentPosition(success,error,{enableHighAccuracy: true});

}

getLocation();

app.refreshLocation = function() {
  console.log('Refreshing user location...');
  getLocation();
};

});

And in my index.html file, I have the iron-ajax element with an empty url property. The url is created and added based on the user's location coordinates.

<section data-route="sightings">
            <template is="dom-bind">
                <iron-ajax
                  id="sightings"
                  auto
                  url=""
                  handle-as="json"
                  last-response="{{response}}"></iron-ajax>
                <iron-list>
                <template is="dom-repeat" items="{{response}}">
                  <div class="row">
                      <h4 class="title">[[item.comName]]</h4>
                      <div class="latin">[[item.sciName]]</div>
                      <div class="loc">Last spotted at <span>[[item.locName]]</span></div>
                      <div class="time">[[item.obsDt]]</div>
                  </div>
                </template>
                </iron-list>
            </template>      
</section>

This works very well in Chrome and Opera (Blink browsers) but fails in Safari and Firefox (both lastest versions; not yet tested in IE). The result is an empty iron-list so basically the browser is failing to request/return the API data in the affected browsers.

Safari gives me this error: TypeError: Attempted to assign to readonly property. success app.js:63

Firefox says: TypeError: sightingsAjax is undefined

Notably the geolocation, interface, routing, and toasts all work fine in all browsers. Also, setting the iron-ajax url property manually also works just fine. It's just the dynamic setting of the url property that seems to fail in Firefox and Safari.

Answer 1

Answering my own question. Instead of storing the selected elements in their own variables, I can just manipulate the url properies directly in the success() callback...

Polymer.dom(document).querySelector('#sightings iron-ajax').url = app.apiRecent;
Polymer.dom(document).querySelector('#hotspots iron-ajax').url = app.apiHotspots;