Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass parameter with Python Flask in external Javascript

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?

like image 981
Tasos Avatar asked Jan 13 '15 08:01

Tasos


People also ask

How do you pass a variable from python to Flask in JavaScript?

To pass variables from Python Flask to JavaScript, we can call render_template with the data argument with the dictionary of data we want to pass to the template. to call render_template with the template file name and the data set to the data dict with the data we want to pass to the template.

Can we use JavaScript in python Flask?

You're right about Flask being a good solution for this and there are examples and tutorials everywhere. If what you want is just to run a specific function on a button press and get something back in javascript, I've put a quick example is below. This can then be run with python app.py and make sure your index.

How do you pass a string in Flask?

You need to make the function parameterless: @app. route('/text') def printer(): # ... And you need to change its implementation so that it returns a valid Response object.


1 Answers

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>
like image 114
davidism Avatar answered Oct 01 '22 02:10

davidism