Refreshing table after performing ajax POST request

Question

I am doing a POST request from ajax to python flask like below.

function humval(val1,val2){
    var dict = {"url":$('#url'+val1).val(),"status":val2};
            $.ajax({
            url: '/testroutez',
            contentType: 'application/json;charset=UTF-8',
            data : JSON.stringify(dict),
            type: 'POST',
            success: function(response){
                alert('success');
                console.log(response);
            },
            error: function(error){
                alert('error occured');
                console.log(error);
            }
        });
}

Html code is handling jinja format

<tbody>
    {% for value in myData %} 
    <tr>
        <td class="urlTd">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
            {{ value["url"] }}
        </td>
        <td>{{ value["org"] }}</td>
        <td>{{ value["val_date"] }}</td>
        <td>
            <input type="hidden" value="{{value['url']}}" id='url{{ loop.index }}'>
            <input type="button" onclick="humval('{{ loop.index }}','valid')" type="button" class="far fa-check-circle hButton" id="hvalid">
            <input type="button" onclick="humval('{{ loop.index }}','invalid')" type="button" class="fas fa-times-circle hButton" id="hinvalid">
        </td>
    </tr>
    {% endfor %} 
</tbody>

flask code is

@data_sources_api.route('/testroutez', methods=["POST"])
def testroutez():
    if loggedin():
        if request.method== 'POST':
            print("request received")
            data_json = request.get_json()
            result_l = MlData.objects(hum_proc='null')
            myData = mldatas_schema.dump(result_l)
            return render_template('users/validation.html', myData = myData)

What is tried is to render the template again with new value myData. But as the request is passing from ajax, it wont work and again the whole page will get refreshed. But I want the table alone to refresh with new values. How it is possible to do like that

score 1 · Answer 1 · answered Apr 04 '22 at 10:50

Jinja does not support dynamic page content(this is because the template is rendered only once when the page is loaded), this means that if your data changes you have to take care of updating them. To do this you have two possibilities, the first is to refresh the page, the second is to request the updated data from the server, and via javascript update the contents of the table within your html page, removing all the records and populating it with the new data returned by the server.

Take a look at the following link: Display data streamed from a Flask view as it updates

Thank you for the quick response. I understood the concept now. Please upvote the question too :) — imhans4305, Apr 04 '22 at 11:29

score 0 · Answer 2 · answered Apr 04 '22 at 10:44

location.reload() will solve the refresh issue

So the ajax request will be like below

function humval(val1,val2){
    var dict = {"url":$('#url'+val1).val(),"status":val2};
            $.ajax({
            url: '/testroutez',
            contentType: 'application/json;charset=UTF-8',
            data : JSON.stringify(dict),
            type: 'POST',
            success: function(response){
                location.reload();  
                // alert('success');
                console.log(response);
            },
            error: function(error){
                alert('error occured');
                console.log(error);
            }
        });
}

I am not sure whether this is the right way. If there is anything better, i am waiting for those

Refreshing table after performing ajax POST request

2 Answers2