Loading external script with jinja2 template directive

Question

I'm very new to jinja2 and the use of templates in general so I was wondering if there's an easy way to load an external javascript. I was thinking of using:

{% block javascript %}
    <script src="myscript.js"></script>
{% endblock %}

But I can't help to ask:

Is there a way of loading this script directly from within a template directive?

Solution 1

You have two choices here -- the first is the way you did it -- simply add the appropriate markup into a template (or a block if you want to be able to override it in templates which extend your first template.)

The second way is to use Jinja2's include function:

{% block javascript %}
    <script type="text/javascript">
        {% include "myscript.js" %}
    </script>
    <!-- The contents of myscript.js will be loaded inside the script tag -->
{% endblock %}

The advantage of using include is that Jinja2 will process your javascript before including it -- which means you can have variables in your javascript that change depending on the state of your program.

The disadvantage of using include in this manner is the same -- your .js file will be run through Jinja2 before being sent out -- if you are not using dynamic content you will just be processing the file unnecessarily for every request -- and if you are using a javascript templating library with Jinja2 syntax then trouble is likely.

Solution 2

This question is quite old, but there is another way of doing it that might be interesting as well. I found it while working with Jinja2 and flask.

I used the url_for() and it works fine:

{% block javascript %}
    <script src="{{ url_for('static',filename='myscript.js') }}"></script>
{% endblock %}

And I have my myscript.js in my static folder. Specified in Jinja2 environment, or by default in flask.

Comments

[kirbuchi]

So this will basically include everything inside the file myscript.js between those tags, I'm I right? Any reason I could not use this to include a text file or something else?

[Sean Vieira]

@kirbuchi -- yes, exactly. The same trade-offs apply.

[anvd]

Sean, thanks for this. Can you include from the static folder, or the include only works from the templates folder? I am asking this, because the myscript.js should be in static folder.

[Jorge Leitao]

The code should include " before {{ and after }}, i.e. src="{{ url_for('static',filename='myscript.js') }}", otherwise it is not valid HTML

[Sylhare]

Thanks, nice catch ;)

[pee2pee]

@anvd did you get an answer for this?

[anvd]

@pee2pee I don't find a way. I need to load it from templates.

[pee2pee]

Damn - thanks for replying