CODEWITHSUNDEEP
pythonflask
Nelly Barret
Nelly Barret

Reputation: 170

Rendering (many) templates in Flask

I would like to have a home page where I choose between option A and option B. When I click on one of the options, I would like to go to page1.html (option A) or to page2.html (option B).

I have these files:

static/
  route.js
templates/
  index.html
  page1.html
  page2.html
web_server.py

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

@app.route('/opta')
def optionA():
    return render_template('page1.html')

@app.route('/optb')
def optionB():
    return render_template('page2.html')

index.html:

<body>
    <button id="optionA">Option A</button>
    <button id="optionB">Option B</button>
    <script src="{{url_for('static', filename='route.js')}}"></script>
</body>

route.js:

$("#optionA").click(function(e) {
    $.ajax({
        type: "GET",
        url: "/opta",
        contentType: 'application/json;charset=UTF-8',
        success: function(result){
            console.log("Hooray");
            window.location.replace("{{ url_for('optA') }}"); // doesn\'t work
            var divA = $("#a"); divA.html(result); // (a is a div in page1.html) doesn\'t work too
        },
        error: function(textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
});

// same for option B

Upvotes: 1

Views: 763

Answers (3)

hcheung
hcheung

Reputation: 4059

First, based on what you outlined, you basically need only one route with different options, so on Flask, you can use Flask variable rules to handle it with one route:

@app.route('/', defaults={'page':None})
@app.route('/<page>')
def index(page):
    if page == None: 
        return render_template('index.html')
    else:
        return render_template(page)

On html template, as mentioned by several comments, all you need is <a> tag, you don't need button and javascript:

<body>
    <a href="page1.html" id="optionA">Option A</a>
    <a href="page2.html" id="optionB">Option B</a>
</body>

Upvotes: 2

luz.arthur
luz.arthur

Reputation: 135

To give a more accurate answer, we'd probably need more description about the pages you want to display. If the pages are completely unrelated, you could just get rid of the javascript, and use the following html code:

<body>
    <a href="/opta"> <button id="optionA">Option A</button> </a>
    <a href="/optb"> <button id="optionB">Option B</button> </a>
</body>

If what you mean by rendering multiple templates in flask is to use some of the index.html layout in pages 'A' and 'B', then I'd read the child template section in jinja2 docs

Upvotes: 0

jsbueno
jsbueno

Reputation: 110726

Well, of course: 

<script src="{{url_for('static', filename='route.js')}}"></script>

WIll fetch your javascript file from the "static" resources - that means it is served as is, and not interpreted as a template. Jinja2 template mechanism used in flask can be used within Javascript files - but you have to serve it through a view, just as you do with your "index" and "opt*" urls (and then, the .js file should be laced in the proper templates dir, not in "static".

Instead of turning the Javascript as a template, which is often more dangerous than not, and makes maintaining the javascript code harder, you could just put in your main index template a simple javascript snippet, just setting the url variable for the document. The fetched javascript would then use the variable set inline in the main html document.

Upvotes: 0

Related Questions