Pass a flask variable from javascript to html

Question

I try to programmatically generate a html div in JavaScript and add it into my html page when a button is clicked. Everything works pretty well except that my variables coming from Flask are not displayed.

Example :

Javascript :

function add_div(){
    var html_to_add = "<div><p>{{my_string}}</p></div>";
    $(html_to_add).insertBefore("#submit-btn");
}

Python :

@app.route("/")
def main_page():
    return render_template("index.html",my_string="Variable à afficher")

When the button is clicked in html, it displays : {{my_string}} instead of "Variable à afficher".

Is there a way to displays the variable correctly ?

Can you try this var html_to_add = str("<div><p>" +{{my_string}}+"</p></div>"); — Arihant
– Arihant, Commented Oct 1, 2018 at 16:47
It doesn't work unfortunately, even if I put the javascript code into a <script> tag. Here is the screenshot : i.sstatic.net/h91t8.png — AlexM
– AlexM, Commented Oct 1, 2018 at 17:00
Try these lines var my_str = '{{ my_string }}'; and var html_to_add = "<div><p>" + my_str + "</p></div>"; — Arihant
– Arihant, Commented Oct 1, 2018 at 17:17

Arihant · Accepted Answer · 2018-10-01 17:18:20Z

2

Hope this helps.

var my_str = '{{ my_string }}';
var html_to_add = "<div><p>" + my_str + "</p></div>";

answered Oct 1, 2018 at 17:18

Arihant

7455 silver badges14 bronze badges

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

1 Comment

AlexM Over a year ago

It works perfectly, even with Jinga expression! Thanks a lot @Arihant

Roy Yin · Accepted Answer · 2018-10-01 17:47:01Z

0

Please try this:

var html_to_add = `<div><p>${my_string}</p></div>`;

Pay attention to the punctuation mark `, it is backquote.

answered Oct 1, 2018 at 17:47

Roy Yin

556 bronze badges

Collectives™ on Stack Overflow

Pass a flask variable from javascript to html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related