calling flask url_for in a javascript file

Question

I want to return to about.html page from this javascript file (header.js). I wrote my header inside a javascript file. The header.js is going to be extended in every html file. When I click a button I want it to redirect to the about.html page or any other html page using url_for. I just want to figure out how to redirect from a javascript file. This is my file structure

/folder
    /index.py
    /templates
        /index.html
        /about.html
    /static
        /css
        /js
            /lib
            /comp
                /header.js

my header.js

class Header extends HTMLElement {
  constructor() {
    super();
    this.html = `
     <header>
        <div class="wrapper">
            <div id="logo-wrapper">
                            <img class="logo" src="images/logo3.png" alt="Jebako Logo"/>
                            <p id='header-name'><a href='index.html'>Jebako</a></p>
                        </div>
                        
                        <div id="menu-wrapper">
                            <p id="menu-icon" class="fas fa-bars"></p>
                            <ul>
                                <li><a href="{{ Flask.url_for('about') }}">About</a></li>
                                <li><a href="media.html">Listen Live <span class="live"></span></a></li>

And this is my index.py

from flask import Flask, render_template, redirect, request, abort, url_for

app = Flask(__name__)

@app.route('/')
def index_page():
    return render_template('index.html')


@app.route('/about/')
def about():
    return render_template('about.html')

if __name__ == "__main__":
    app.run(debug=True)

Daniel · Accepted Answer · 2021-08-21 14:24:12Z

1

You don't need to use url_for. In the index.py change

app = Flask(__name__)

to

app = Flask(__name__, static_folder='/')

And you can change the html href links to:

#Or whatever you used app.route() with
href="templates/about"

You'll also need to change all existing links to use the new static folder. So like for a javascript,

<script src = "templates/about.js"></script>

edited Aug 21, 2021 at 14:24

answered Aug 20, 2021 at 21:08

Daniel

615 bronze badges

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

2 Comments

seyifunmi Over a year ago

working with the js.file. if I use url_for I get to use the url path which is '127.0.0.1:5000/aboutpage' but when I use href='templates/about.html' the url path is like this 127.0.0.1:5000/about.html

Daniel Over a year ago

Yes, sorry about that. For pages defined with app.route() in index.py, use whatever method you defined there. So for example you set the about page to: app.route("/about/") Then also change the href to href"/about/" I've also edited my answer for more clarity, hopefully this fixes it.

Collectives™ on Stack Overflow

calling flask url_for in a javascript file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related