How to structure dynamic javascript creation in Flask?

Question

I’m building a website using the (excellent) Python Flask framework in which there is a templates/ folder and a static/ folder. As the names suggest, the templates folder contains the templates which are rendered through the jinja2 templating engine and the static folder contains static content such as css, images, and static javascript files.

The javascript files is what I’m having trouble with though. Sometimes I want to place a jinja variable in a piece of js like this for example:

var requestJson = {'text': messageText, 'toUserId': {{ user.id }}};

If I do this in a do this in a .js file in the static/ folder though, it isn’t rendered, so this only works if I place it between <script> tags in the template file. That works, but it feels kinda messy because I now have some js in the static folder, and some js in the template files.

I could of course solve this by defining a document.toUserId = {{ user.id }}; in the template and using that in the .js files, but yeah, that also feels kinda like a hack.

So my question is; what is the best/pythonic/neatest way of handling the insertion of dynamic values from jinja in javascript?

Asked By: kramer65

||

Source

Answer 1

Very interesting question which I’ve thought about a lot at a certain point in time. By now I’ve done it and have seen it done precisely this way and it seems to me the best and most pythonic option. I think I can recall it’s even recommended by Flask documentation (can’t remember where).

Just put the specific variables that need a template rendering in a script in your .html files, using appropriate namespaces.

And all the rest in your .js files (I happen to be using CoffeeScript so it’s even more important for me to put the least code possible in <script> tags directly in the template, for consistency reasons).

For instance, here is a (slightly modified) script that lies at the end of a template I’m currently working with:

<script>
  $(function() {
    window.my_namespace.view_dashboard_vars = {};
    window.my_namespace.view_dashboard_vars.change_widgets_positions_url = "{{ url_for('dashboard.change_widgets_order', _external=True) }}";
    window.my_namespace.view_dashboard_vars.deactivate_widget_url = "{{ url_for('dashboard.deactivate_widget', _external=True) }}";
    window.my_namespace.view_dashboard_vars.dashboard_url = "{{ url_for('dashboard.view_dashboard', dashboard_id=dashboard.id, _external=True) }}";
    window.my_namespace.view_dashboard_vars.dashboard_id = "{{ dashboard.id }}";
    $(document).ready(function() {
        $("select#dashboard_dates_presets").val("{{ preset }}");
        my_namespace.update_dashboard_dates_interval();
    });
  });
</script>

It works really well and after several projects and some of them being around for quite a bit by now, with lots of people involved, I can tell it’s perfectly readable and maintainable. Just be careful to choose your namespaces wisely.

Answered By: Jivan

Answer 2

i’m in 2023 and i’m suffering too .. (--)
my question is how to pass flask variables in javascript existed file not tag (--)

Answered By: BOUZID KOBCHI

How to structure dynamic javascript creation in Flask?

Question:

Answers: