Flask with AJAX - updating a HTML table

Question

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?

the jquery function element.html(html_string) expects html_string to be just that, html, so having your app return json probably won't work. Throw some console.log(response.valueToUpdate) statements in there to check what your getting from app.py, then use dev console to check if your jquery selector is actually finding the correct element. — Danielle M.
– Danielle M., Commented Jan 28, 2018 at 17:20

ballmerspeak · Accepted Answer · 2018-01-28 17:16:09Z

1

$("#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.

answered Jan 28, 2018 at 17:16

ballmerspeak

1472 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask with AJAX - updating a HTML table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related