0

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?

Community
  • 1
  • 1
vabm
  • 285
  • 7
  • 16
  • You could debug by first accessing the `host/myStuff.html` in your browser. Ajax(`load` in this case) does the exact thing. It just loads what is on that resource and populates it on the div. You could then check your Network tab in your browser developer tools to see all the requests made by the application and determine if it's something wrong there or it's just a DOM problem. – caisah Feb 28 '17 at 17:22
  • @caisah I checked the Network and the button seems to be active (sending requests), but the div does not get reloaded. If I do a full reload it works (i.e., new content appears) but off course not as elegant. Any other ideas on how to debug? – vabm Feb 28 '17 at 17:41
  • I just realised that I am getting the following error on the console: `GET http://127.0.0.1:5000/myStuff.html 404 (NOT FOUND)`. I'm running on a local server, any ideas @caisah? – vabm Feb 28 '17 at 17:44
  • The server does not return anything on that URL. Try to debug your server app. Check if anything happens when you fire up the request. – caisah Feb 28 '17 at 17:59
  • Found the problem. Deleted the .html from `$('#myDiv').load('/myStuff')` and now it is working. Kind of have a different problem now though... the complete page is loading within the div instead of those divs that were originally supposed to there. I tried adding a pointer by class such as `$('#myDiv').load('/myStuff .myClass')` and `$('#myDiv').append('
    ' + myIds[i] + '
    ');` but not working. Any idea on how to load only that part? Cheers !
    – vabm Feb 28 '17 at 18:05
  • If you don't want to load the entire page inside that div you should then call $.ajax, get the data you need from the server, format it as you wish and insert it afterwards inside the div. Another option is on the server side to return a json. When you request that json you can parse it and then generate some DOM nodes which you can then insert wherever you want. – caisah Feb 28 '17 at 18:13
  • Thanks, will update the question to get help on that – vabm Feb 28 '17 at 19:51

0 Answers0