Passing variables from Flask (python) into a Javascript file separate from the HTML file

Question

I know that you can simply call a variable from Flask by including return render_template('index.html', variable=newvariable) in the Python file and

<script>
var JSVAR = '{{ newvariable }}';
</script>

in the index.html file. But what if I want to pass that variable onto a purely Javascript file that's included within the index.html file? I'm thinking I need to create an HTML 'variable' of sorts using the id parameter then use jQuery to call it, but I can't figure out the syntax.

Any ideas?

Tim Wilder · Accepted Answer · 2013-11-27 07:14:46Z

3

Exposing a function and making an ajax call to it isn't a bad way to go. That approach comes with the benefit of leaving a clear trail of function calls for maintainers.

http://api.jquery.com/jQuery.ajax/

http://flask.pocoo.org/docs/patterns/jquery/

The second link has a more detailed description, but the general idea is you have a Flask app set up to handle requests from the browser, and in that application you set up a method that can have requests sent to it that will take care of passing your variable back out to the js client.

In the js script you then make an ajax call to that method's url, and have a callback function that processes the response. This approach can do some really, really cool things.

If you're not familiar with ajax, it might be useful to Google some tutorials. This one is half way decent as an overview: http://www.tutorialspoint.com/ajax/ajax_in_action.htm

edited Nov 27, 2013 at 7:14

answered Nov 27, 2013 at 6:38

Tim Wilder

1,6471 gold badge19 silver badges28 bronze badges

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

4 Comments

quantumtremor Over a year ago

Thank you, I'm looking into AJAX now. Can you be a little more clear as to where which code is? Do I call jQuery.ajax() inside the <script> tags in the index.html file? What do you mean by exposing the function?

quantumtremor Over a year ago

So basically, in my javascript file, I have a function that makes an ajax request and calls the server to tell it what should be there? Like if I have var url = "validate?id=" + escape(target.value) in my javascript file, should I have @('/validate?id=<myID>') in my Flask file?

nothankyou Over a year ago

You're getting the idea. By 'expose', he means 'create a route mapped to a view function', as in @app.route('/validate'). Granted, in flask, you access query params via the request object a la requests.args.get('id', ''). There's nice paragraph in the quick start guide roicheer: flask.pocoo.org/docs/quickstart/#the-request-object

nothankyou Over a year ago

You really shouldn't pass variables into your embedded javascript via the templating engine. That can get messy right quick. Going the AJAX route is a much better option.

Kanishk Gandharv · Accepted Answer · 2017-10-14 02:58:39Z

0

Just came across this same issue, here is what I did

from jinja2.environment import Template

def render_js():
    file_content = open(path_to_jsfile, 'r').read()
    template = Template(file_content)
    return template.render(arg1='value1', arg2='value2')

answered Oct 14, 2017 at 2:58

Kanishk Gandharv

3043 silver badges6 bronze badges

Comments

James Agyabeng · Accepted Answer · 2023-03-09 11:23:07Z

0

You can access the variable using a data attribute on an html element. You can then use a querySelector to access the value in that data attribute.The data-chart attribute holds the variable from the flask app

const chart-data = document.querySelector("#chart-div").getAttribute("data-chart")

That should get hold of the variable from the flask app.

answered Mar 9, 2023 at 11:23

James Agyabeng

11 bronze badge

Collectives™ on Stack Overflow

Passing variables from Flask (python) into a Javascript file separate from the HTML file

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related