Pass Parameter with Python Flask in External JavaScript

Pass parameter with Python Flask in external Javascript

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>

Passing variables from Flask to JavaScript

The mobiusklein answers is pretty good, but there is "hack" you should consider. Define your Javascript method to receive params and send data as params to your function.

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackoverflow.com'}
    return render_template('settings.html', data=data)

app.js

function myFunc(vars) {
    return vars
}

settings.html

<html>
    <head>
         <script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>
         <script type="text/javascript">
            myVar = myFunc({{data|tojson}})
         </script>
    </head>
</html>

passing data from flask to javascript as json not working from separate .js file

<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>

    </style>
</head>
<body>
    <div id="graphDiv"></div>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
      var graphData = {{ data.chart_data | safe }}
    </script>
    <script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</body>
</html>

Its happening because thats not valid JavaScript syntax. Thats Jinja2 templating syntax.

You need to define graphData before you can use it in your main.js file.

How to access external javascript files through jinja[Flask]?

You need to understand how Jinja works. When you run the commmand
return render_template('main.html', var1 = 1, var2 = 2), it gets processed in the following way:

The Flask server opens the main.html template
Renders/replaces all the defined Jinja variables i.e. the context into the template
Sends the rendered HTML to the client.

Hence the variables are not loaded into the {{ var }} place-holders on the client side but at the server side.

Therefore to achieve what you are trying to do you could do something as follows:
In main.html code:

<html>
<body>
        <p>The first value is {{var1}}</p>
        <script>var var2 = {{var2}};
        <script src="main.js"></script>
</body>
</html>

In main.js code:

window.onload=function(){
    console.log(var2);
};

Note: We have added the script inside HTML code before calling main.js which the dependent script.

Let me know if this solves your issue and you have understood the explanation.

External JavaScript file is not getting added when running on Flask

Serve the map.js file as a static resource:

move the file to a static/ subdirectory of your package

generate a static URL for it in a Jinja2 template like so:

 <script type="text/javascript"
         src="{{ url_for('static', filename='map.js') }}"></script>

The filename parameter takes a relative path; you can use subdirectories was needed.

Pass Parameter with Python Flask in External JavaScript