Using url_for() in a Javascript file with Jinja/Flask

Question

I'm converting a static HTML page to a Flask application which would dynamically change its CSS file depending on the screen size. However when switching to Flask, I have to grab URLs for a file in a HTML files like this:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>

However in my Javascript init.js I have this code to switch between CSS files.

(function($) {

    skel.init({
        reset: 'full',
        breakpoints: {
            'global':   { range: '*', href: 'static/css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
            'wide':     { range: '961-1880', href: 'static/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
            'normal':   { range: '961-1620', href: 'static/css/style-normal.css', containers: 960, grid: { gutters: 40 } },
            'narrow':   { range: '961-1320', href: 'static/css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
            'narrower': { range: '-960', href: 'static/css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
            'mobile':   { range: '-736', href: 'static/css/style-mobile.css', grid: { collapse: true } }
        },
        plugins: {
            layers: {
                sidePanel: {
                    hidden: true,
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'left',
                    animation: 'pushX',
                    width: 240,
                    height: '100%',
                    clickToHide: true,
                    html: '<div data-action="moveElement" data-args="header"></div>',
                    orientation: 'vertical'
                },
                sidePanelToggle: {
                    breakpoints: 'narrower',
                    position: 'top-left',
                    side: 'top',
                    height: '4em',
                    width: '5em',
                    html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>'
                }
            }
        }
    });

I'm not able to put a {{ url_for('static', filename='css/style.css')}} inside of Javascript. Is there any way I can do this?

Pav Sidhu · Accepted Answer · 2017-04-27 19:08:29Z

You have two options:

1. Inline Javascript with Jinja: Quite simply, if you put your Javascript inside <script> tags, you can add the file using Jinja:

<script>
  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: {{ url_for ("static", filename="'css/style.css'" ) }},
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: {{ url_for ("static", filename="'css/style=wide.css'" ) }},
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: {{ url_for ("static", filename="'css/style-normal.css'" ) }},
                containers: 960,
                grid: { gutters: 40 }
            }
        })
</script>

2. Call the css files without using templating: You could just simply call the files without Jinja from your Javascript file.

  skel.init({
        reset: 'full',
        breakpoints: {
            'global': {
                range: '*',
                href: 'https://example.com/static/css/style.css', 
                containers: 1400,
                grid: { gutters: 40 },
                viewport: { scalable: false }
            },
            'wide': {
                range: '961-1880',
                href: 'https://example.com/static/css/style-wide.css', 
                containers: 1200,
                grid: { gutters: 40 }
            },
            'normal': {
                range: '961-1620',
                href: 'https://example.com/static/css/style-normal.css',
                containers: 960,
                grid: { gutters: 40 }
            }
        })

The inability to use templating in your JS files is a problem with Flask and Jinja in my opinion. For your case though would it not be easier to simply use media queries in your CSS to set different properties depending on screen size?

Thanks so much. I ended up doing the inline script with Jinja. Works out perfectly!

Collectives™ on Stack Overflow

Using url_for() in a Javascript file with Jinja/Flask

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related