I need to update the contents of a dynamic div with information I a getting from a csv file using Python / Flask. I cannot attach my full code as it is quite long, but here is a summary of the problem. I am using a normal csv read routine and then serving it with Flask:
@app.route('/myStuff', methods=['GET', 'POST'])
def myStuff():
with open('static/databases/myData.csv', 'rb') as n:
reader = csv.reader(n, delimiter=",")
counter = len(myDatabase)
myDatabase = list(reader)
myIds = [col[1] for col in myDatabase]
Then, in my myStuff.html
I have a parent div to be fed:
<div id="myDiv"></div>
Later, I call the csv data like this:
var myDatabase = {{ myDatabase|safe }};
var counter = {{ counter|safe }};
Then, using javascript I generate a number of divs within myDiv according to the length of the csv data:
for(var i = 1; i < counter; i++) {
$('#myDiv').append('<div>' + myIds[i] + '</div>');
};
In parallel I have some routines to modify the csv file (specifically the number of items), and I want them to be updated wihout reloading the complete html. I have tried adding a button to my html:
<button type="button" id="myButton" >Reload</button>
And then using a simple function with jQuery to reload myDiv within the html:
$('#myButton').on('click', function() {
$('#myDiv').load('/myStuff.html');
});
But nothing seems to be reloading. I am quite new to this sort of routine, and I have not been able to find any tutorial or example dealing with the same kind of data (csv) using Python / Flask. Any help will be really appreciated.
Edit:
Thanks to @caisah I managed to reload the data using AJAX, but I am having a new problem. I only need the children of #myDiv
to be reloaded and with the code I have for now the complete html is been reloaded within the #myDiv
container:
$('#myButton').on('click', function() {
$('#myDiv').load('/myStuff');
});
I have tried pointing at the contents using:
$("#myDiv").load(location.href + " #myDiv");
After @Peca's answer to this question, but only the parent div (and not the children) gets reloaded. Any hints on how to achieve this?