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

Charlie Kelmeckis · Answer 1 · 2017-03-02T21:57:34.110

0

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.

edited Mar 02 '17 at 21:57

answered Mar 01 '17 at 20:58

Charlie Kelmeckis

109
1
7

Ok, when I get to the office tomorrow I'll look over it and see what I can do. – Charlie Kelmeckis Mar 01 '17 at 22:51
Thank you, I hope your answer, because I got no response elsewhere – vdelianny Mar 01 '17 at 23:08
@vdelianny I updated my post with an example and some more information, let me know the outcome of this. – Charlie Kelmeckis Mar 02 '17 at 14:44
Hello. The code only update the file json. if added and make this.$.ajaxRequest.generateRequest(); update the file json and not save new items, does not update the DOM. I am not using database yet. Thank you, I hope your answer – vdelianny Mar 02 '17 at 17:17
Ok, so just to understand... it does change the output in the dom-repeat if you submit new data, but if you do not submit new data it does not update it? Sorry the wording on that last comment was hard for me to understand. – Charlie Kelmeckis Mar 02 '17 at 19:10
Exactly. If you add a new element, it goes to the "addData" function and you need to update the DOM (esquema). – vdelianny Mar 02 '17 at 21:32
If what I said is correct, then you're looking for an async. That will update your dom-repeat every x milliseconds. Would that be what you need? If so I'll update my answer with an example. – Charlie Kelmeckis Mar 02 '17 at 21:37
Yes, I need it to be asynchronous, but it can not be done without milliseconds? But when invoking the "addData" function with a button. Although with milliseconds it could also work for me. – vdelianny Mar 02 '17 at 21:44
Ok, give me just a minute to edit my answer and explain it. This should work for what you're trying to do. – Charlie Kelmeckis Mar 02 '17 at 21:49
@vdelianny Check out the last part of my answer and see if that's what you need. – Charlie Kelmeckis Mar 02 '17 at 21:58
I apologize, but can you post more of your code, or perhaps create a jsfiddle. I can't imagine what's going on without seeing it. – Charlie Kelmeckis Mar 02 '17 at 22:11
Ok, I will create jsFiddle. Give me just a minute – vdelianny Mar 02 '17 at 22:13
https://kobra.io/#/e/-KeG4xI_hpA6qzQNUZgG Here are my code. I'd appreciate your help – vdelianny Mar 02 '17 at 22:23
Hello. I answered the file on kobra.io/#/e/-KeG4xI_hpA6qzQNUZgG – vdelianny Mar 03 '17 at 01:34
I will take a look at it as soon as I get the chance. Thank you for posting it. – Charlie Kelmeckis Mar 03 '17 at 02:57
Me too. I cannot get the update data in the json file. Have you been found the solution? – Lun Leong Mar 03 '20 at 06:59

Polymer: update DOM when changes file json

1 Answers1