How can I pass parameter through serialization and then parse them using external JavaScript?

Question

I use Python Flask for my website and I pass several parameters to Javascript. This is my code:

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route("/")
def index():

    return render_template("index.html", param1="Hello")


<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script>console.log({{param1}})</script>
</html>

With this way, it works without a problem. The example is a simplified of my own. But, if I want to have the script on an external file and call it like this:

<html>
   <head>
   </head>
   <body>
      <p>Hello World</p>
   </body>
   <script src="/static/js/myjs.js"></script>
</html>

And the myjs.js file is the console.log({{param1}}), then it doesn't work. So, is there any way to pass parameters in external Javascript files with Python Flask?

I have two folders: 1) static and 2) templates. In static folder there are css, js and images. Should I move the js files ijn templates to make it work? — Tasos
– Tasos, Commented Jan 13, 2015 at 9:17

davidism · Accepted Answer · 2016-11-03 16:19:20Z

22

If you want to render a file with Jinja, you need to call render_template on it and pass it the desired values. Just linking directly to a static file obviously doesn't do that. One solution is to use Jinja's include block. This requires that 'myjs.js' is in the 'templates/js' folder, and will include it in the rendered template, passing all the templates context to the included template.

<script>{% include 'js/myjs.js' %}</script>

The better solution is to not require rendering the js on every request, and instead passing parameters to js functions from your template.

<script src="{{ url_for('static', filename='js/myjs.js') }}"></script>
<script>
    my_func({{ my_var|tojson }});
</script>

edited Nov 3, 2016 at 16:19

answered Jan 13, 2015 at 15:56

davidism

128k31 gold badges417 silver badges348 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Falko · Accepted Answer · 2018-05-13 05:02:10Z

I used a different way to load a javascript file specified in html page:

Firstly, I define some variables inside <head></head> tags, and so I call my javascript file:

<head>
...
<script src="/static/js/jquery.js"></script>
<script  type=text/javascript>
    $(document).ready(function() {
        $link_subcat = "{{ url_for('load_subcategories') }}";
        $link_cat = "{{ url_for('load_categories') }}";
    });
</script>

<script src="{{ url_for('static', filename='finances.js') }}"></script>
...

This is my javascript file content:

$(document).ready(function() {

    $("#category").change(function() {
        $.ajax({
            type: "POST",
            url: $link_subcat,
            data: {cat: $(this).val()},
            success: function(data) {
                $("#subcategory").html(data);
            }
        });
    });

    $("input[name=type]").change(function() {
        $.ajax({
            type: "POST",
            url: $link_cat,
            data: {type: $('input[name="type"]:checked').val()},
            success: function(data) {
                $("#category").html(data);
            }
        });
    });

});

This approach works for me.

Collectives™ on Stack Overflow

How can I pass parameter through serialization and then parse them using external JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related