How to use Python Flask in Javascript file(.js)? [closed]

Answer 1

the solution is to include the javascript code (the same with css) via {% block %} tag in the template, not via {% block javascripts_others %}{% endblock %} {% block javascripts_local %}{% endblock %} {% endblock %}

in my-page.html

{% extends 'base.html' %}

[..]
{% block stylesheets_local %}
  {{ super() }} {# to load the parent assets #}
  
{% endblock %}

{% block body %}
  [..]
{% endblock %}


[..]
{% block javascripts_local %}
  {{ super() }} {# to load the parent assets #}
  
{% endblock %}

if you want to load other javascript or css external libraries via e.g: cdn for particular page the logic is the same, you need to extend {% block javascripts_others %}{% endblock %} and {% block stylesheets_others %}{% endblock %} blocks in your template, but don't forget to include {{ super }} to load the parent assets if any.

But if you think an external libraries, javascript or css, should be loaded globally then add them in base.html respectively below bootstrap and font awesome libs. So with this logic you'll load the assets for any page with the right order with no conflict.

But it happens that your code (js or css) is meant to be loaded for few pages not all pages (not globally), in this case, create a separated template and put you js or css code and include it in the right place and order (like we did previously)

in page-1.html, page-2.html, page-3.html ..

{% extends 'base.html' %}

[..]
{% block stylesheets_local %}

  {{ super() }} {# to load the parent assets #}
  {% include 'includes/mycss.css.html' %}

{% endblock %}

{% block body %}
  [..]
{% endblock %}


[..]
{% block javascripts_local %}

  {{ super() }} {# to load the parent assets #}
  {% include 'includes/myscript.js.html' %}

{% endblock %}

note how i named partial template just convention, a good practice.