How to reload javascript for jinja template?

Question

I'm relatively new to jinja2 (and by no means a web dev expert), and I'm having trouble getting the javascript associated with a jinja template to reload (and update its variables) based on changes in the state of the program.

Essentially, I have one template iterating through a list of items:

{% for item in items %}
<p> {{item['property a']}}</p>
blah blah blah`

and then I call another template I've imported within that for loop:

{% import 'secondTemplate.html' as s %} //not sure whether this matters if it goes inside or outside the for loop
<p> {{s.doSecondStuff(item)}}</p>

That all works. The second template executes each time with each item, which is want I want.

But, I have some secondTemplate.js associated with secondTemplate.html that operates on the variables passed to secondTemplate.html. My problem is that secondTemplate.js only ever operates on the first item's values.

It seemed like the top answer from Loading external script with jinja2 template directive would work, so I've been trying to put the following in the for loop:

{% block javascript %}
    <script type="text/javascript">
        {% include "secondTemplate.js" %}
    </script>
{% endblock %}

But the js is still only reflecting the values of the first item in the list.

Any ideas? Thanks!

Answer 1

If you open your Flask app with a browser, Flask looks through the routes you defined and selects the one that it finds the most appropriate, for example:

@app.route('/<name>')
def index(name):
    return render_template('index.htm', var1=name)

It executes the inside of the function like a normal function in any programming language. And here is the point: The function only returns a string of HTML. It doesn't do any "magic" to pass any information about variable names to the browser. To be concrete, if index.htm looked like this:

<h1>Hello {{ name }}!</h1>

Then render_template('index.htm', name="world") returns a string with the content "<h1>hello world!</h1>" , which is what your view returns, which is what Flask gives the browser.

So the browser, and therefore your Javascript code, have absolutely no idea which part of the HTML was a variable and which not . By the time you are executing Javascript in the browser, your Flask app already has forgotten about the client and the value of name it was given.

It's really unclear what you are asking, but i hope i made it clear to you how the thing you are trying to achieve will not be possible in that way.

Answer 2

I am not familiar with jinja, but there is a trick like below, if you want to reload js file (if I understand you right). Let's make all tags with id's, so:

<script src="be/happy.js" id ="be/happy.js"></script>
<script src="be/very/happy.js" id ="be/very/happy.js"></script>

and so on. Now is the clue. We can force browser to load file again, using this method:

var s = document.getElementById('be/happy.js'); //get access to node
d.parentNode.removeChild(s); //remove it from document
delete d; //destroy element

d = document.createElement('script'); //create new script tag
d.src = d.id = 'be/happy.js'; //add the same value to id and src attribute
document.getElementsByTagName('head')[0].appendChild(d); //append child again, what force browser to script reload