Question 69686 in Ajax Question posted in
You can find the official documentation here.

Refreshing table after performing ajax POST request – Jquery ajax

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search