铁数据表问题

Question

I have some issues with dynamic tables component from Polymer. Here is what I would like to achieve: I would like to send a sql request with an ajax request and update the table with the response of that request.

So far what I have managed to do is that I send my sql request, the server then creates a .json file with the data, then I use another request to get that file and put it into the table.

Problem is that I have to refresh the entire web page in order to get the table filled.

Is there any way to update the table directly with the response of the first ajax request, and not using a json file ?

Here is my code:

<template>
    <iron-ajax 
    id="request" 
    url="/request" 
    method="POST" 
    on-response="ajaxResult"
    on-error="ajaxError"
    content-type="application/json"
    body: {id, Prio, Stat}></iron-ajax>

<iron-ajax url="../data.json" last-response="{{data}}" auto></iron-ajax>

<iron-data-table items="[[data]]" id="table123">
<data-table-column name="Title">
    <template>[[item.ID]]</template>
</data-table-column>
<data-table-column name="PRIORITY">
    <template>[[item.PRIORITY]]</template>
</data-table-column>
<data-table-column name="REQUEST_STATUS">
    <template>[[item.REQUEST_STATUS]]</template>
</data-table-column></iron-data-table>

</template>

<script>
    Polymer({
        is: 'gestion-ticket',

    ajaxResult: function(e) {
        //var Object=e.detail.response;
        document.getElementById("table123").clearCache();

    },
    f: function(e) {
        var body = {
        "id": this.querySelector("#comment").value,
        "Prio" : this.querySelector("#Priority").selected,
        "Stat" : this.querySelector("#Status").selected
        };
        this.$.request.body = body;
        this.$.request.generateRequest();
        },
    ajaxError: function(event) {
        console.log(event);
        console.log(event.detail);
        console.log(event.detail.request);
        console.log(event.detail.request.xhr.response);
    }
    });
</script>

I tried the clearCache() function to reset but it is not working, I feel like this is the function I should use but I am doing something else wrong here. Thank you a lot for taking the time to help me.

Answer 1

Here is how to properly send AJAX request, receive response and bind received data to iron data table:

 <iron-ajax 
        method="POST"
        handle-as="json"
        id="iron_ajax_element"
        on-response="recieve_responseHandler"
        ></iron-ajax>

 .....

    send_request: function() {

            console.log('send_request:');

            var iron_ajax_element = this.$.iron_ajax_element;


            //set AJAX URL point
            iron_ajax_element.url = this.some_url;

            //set AJAX params
            var aniArgs = {};
            aniArgs['param'] = this.some_param;
            iron_ajax_element.params = aniArgs;

            //run AJAX
            iron_ajax_element.generateRequest();
    },
    recieve_responseHandler: function(e) {

        console.log('recieve_responseHandler:');

        console.log(e.detail.response);
        var response  = e.detail.response;
        console.log(response);

       //Bind the response to iron-data-table here, as:
       this.iron_data = response;

   },