I have a table in my template that looks like this:
{% if table %}
{% for row in table %}
<tr>{{ row }}</tr>
{% endfor %}
{% endif %}
Initially 'table' is set to null so nothing shows.
I have a javascript client that, at some point, receives some data from the server. This data then needs to be showed to the user. I basically want to update table with the data received by the client.
Is this possible ?
A more general solution to this problem is compiling (some of) your Jinja templates to JavaScript, so that you can use them on the client side.
I wrote some code to do this which you might be able to use:
I doubt whether you can achieve it. But there is another way around. Keep the table part in a separate HTML/template which can be included in main html file while rendering.
Now, when you receive the data in the client side. Change the format of data and instead of returning the data, just return the table template when it is rendered and using javascript you can replace the existing table with the new table which you have received in the client side.
Main html file:
<div>
{% include 'table_template.html' %}
</div>
table_template.html
{% if table %} {% for row in table %}
<tr>{{ row }}</tr>
{% endfor %} {% endif %}
Step 1: Initially, just return the main html file as it is.
Step 2: When a client side receive the data, make sure you return rendered table_template.html.
Step 3: Once you receive the rendered data, replace the existing table with the new one. for eg:
$.post("/api-url", function(result) {
if (result) {
//here you replace the existing null table with the new rendered table
$("table").html(result);
}
});
