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
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
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