CODEWITHSUNDEEP
javascriptpythonajaxflask
Ben Mayo
Ben Mayo

Reputation: 1315

Flask with AJAX - updating a HTML table

Using Flask and AJAX I build a HTML table like this...

app.py

tableDict = buildTable()
return render_template('page.html', tableDict = tableDict)

page.html

<tbody>
{% for key, value in tableDict.iteritems() %}
<tr>
<th> {{ key }} </th>
<td> {{ value }} </td>
</tr>
{% endfor %}
</tbody>

That works fine.

I want to update this table using AJAX. I know how to update an element by it's ID tag with something like

ajax.js

$("#elementToUpdate").html(response.valueToUpdate);

So I tried...

app.py

tableDict = buildTable()
return jsonify(tableDict = tableDict)

ajax.js

$("#tableDict").html(response.tableDict);

This doesn't work - my guess is because I'm not updating an ID tag at all...so I shouldn't be surprised about that.

How can I get the dict that I pass to AJAX to update the table?

Upvotes: 1

Views: 1929

Answers (1)

ballmerspeak
ballmerspeak

Reputation: 147

$("#elementToUpdate").html(response.valueToUpdate);

This line will update the HTML of that element to whatever response.valueToUpdate. Assuming tableDict is HTML, you want to use jQuery to select the element you want to update.

First thing I would double check is that $("#tableDict") is selecting the element you want. You can confirm this by opening Chrome Dev Tools and testing your jQuery selector in the console.

Second thing is to check the HTML on the page after the AJAX call comes back. Throw some console.log's to make sure the data is coming back in the structure you are expecting.

Upvotes: 1

Related Questions