Polymer: update DOM when changes file json

Question

I am making a modal to add data to a json file and display it in the DOM. The data is saved to the file, but the DOM is not updated. I'm using iron-ajax.

     <div>
         <iron-ajax 
            auto
            url="areas.json"
            handle-as="json"
            last-response="{{response}}"
            on-response="responseHandler" 
          ></iron-ajax> 

          <div class="modal"></div>

        <div class="layout vertical">        
            <div class="layout horizontal">
                <template class="" id="esquema" is="dom-repeat" items="{{response}}" as="item">
                    <div class$="iron-flex {{item.type}}">{{item.name}}</div>
                </template>
            </div>
         </div>
    </div>

I did not put the modal code, but it does work to save and call the function:

    addData: function(){
            var selectedItem = this.options[this.selectedIndex];            
            nuevo.push({"name": this.$.numberArea.value, 
                        "level": "1", 
                        "type": selectedItem.area});
            this.$.numberArea.value = null;
            this.$.areaSelect.selected = null;    
        },

Attempt that in that function update the id="esquema". I make this.$.esquema.render(), but it does not work.

I would greatly appreciate your help

Answer 1

Ok, so I got time to actually look at everything on my computer. When you were trying to .render or .generateRequest, you were doing it on the dom-repeat template. Where that needs to be done is on the iron-ajax element. So, you'll do something like this:

<iron-ajax 
    auto
    id="ajaxRequest"
    url="areas.json"
    handle-as="json"
    last-response="{{response}}"
    on-response="responseHandler"></iron-ajax> 

Then, you'll add to your function this.$.ajaxRequest.generateRequest(); like so:

addData: function(){
    var selectedItem = this.options[this.selectedIndex];            
    nuevo.push({"name": this.$.numberArea.value, 
                "level": "1", 
                "type": selectedItem.area});
    this.$.numberArea.value = null;
    this.$.areaSelect.selected = null;
    this.$.ajaxRequest.generateRequest();
},

On your responseHandler, I'm assuming it looks similar to this currently:

responseHandler: function(d){
    this.whereDataIsStored = d.detail.response;
}

What you should do here is add an async call to have that iron-ajax repeat every so often. That time is set in milliseconds, so here's what you'd add:

responseHandler: function(d){
    this.whereDataIsStored = d.detail.response;
    this.async(function(){
        this.$.ajaxRequest.generateRequest();}, 5000);
},

What that's doing is storing your data in a property, then running an async request every 5000 seconds to generate a new request for data. That data should update in your dom-repeat.

Here's some more information on async.