Skip to content Skip to sidebar Skip to footer
Home / Flask / Javascript / Python

How To Use Python Flask In Javascript File(.js)?

Post a Comment
When Javascript code was in the HTML file, this was not problem. However, As soon as I moved the contents of the script tag to a js file for use in other HTML files, there was a pr

Solution 1:

the solution is to include the javascript code (the same with css) via {% block %} tag in the template, not via <script src=".."> html tag (<link rel="stylesheet" href="..">).

you have two option, the javascript code (the same with css) is meant to be loaded and executed for:

  • a particular page (local)
  • all pages (global)

with jinja2 template inheritance mechanism, below how you can do:

in base.html

<!doctype html>
<html class="no-js" lang="en_US">
<head>
  <meta charset="utf-8">
  <title>{% block title %}{% endblock %}</title>
  <meta name="description" content="{% block description %}{% endblock %}">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
  <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

  {% block stylesheets %}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  {% block stylesheets_others %}{% endblock %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-override.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-extend.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  {% block stylesheets_local %}{% endblock %}

  {% endblock %}

  <meta name="theme-color" content="#fafafa">
</head>
<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  {% block body %}
    {% include 'includes/header.html' %}
    {% block content %}{% endblock %}
    {% include 'includes/footer.html' %}
  {% endblock %}

  {% block javascripts %}

  <script src="{{ url_for('static', filename='js/vendor/modernizr-3.8.0.min.js') }}"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='js/vendor/jquery-3.4.1.min.js') }}"><\/script>')</script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  {% block javascripts_others %}{% endblock %}
  <script src="{{ url_for('static', filename='js/vendor/vendor.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/plugins.js') }}"></script>
  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  {% block javascripts_local %}{% endblock %}
  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>

  {% endblock %}
</body>
</html>

in my-page.html

{% extends 'base.html' %}

[..]
{% block stylesheets_local %}
  {{ super() }} {# to load the parent assets #}
  <style>
  /* You "Local" css goes here .. (if any) */
  </style>
{% endblock %}

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


[..]
{% block javascripts_local %}
  {{ super() }} {# to load the parent assets #}
  <script>
  // You "Local" javascript code goes here ..
  </script>
{% 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.


Post a Comment for "How To Use Python Flask In Javascript File(.js)?"