I wanna know whether i can access external javascript files through jinja? It's working well with html files or with js embedded in html files but not when javascript file is external.
code:
@app.route('/')
def default():
return render_template('main.html', var1 = 1, var2 = 2)
main.html code:
<html>
<body>
<p>The first value is {{var1}}</p>
<script src="main.js"></script>
</body>
</html>
main.js file:
window.onload=function(){
console.log('{{var2}}');
};
now the jinja code in main.js is not working
Maybe it's not possible to use it in external js?
If someone can help, please reply to this thread.
I wanna know whether i can access external javascript files through jinja? It's working well with html files or with js embedded in html files but not when javascript file is external.
code:
@app.route('/')
def default():
return render_template('main.html', var1 = 1, var2 = 2)
main.html code:
<html>
<body>
<p>The first value is {{var1}}</p>
<script src="main.js"></script>
</body>
</html>
main.js file:
window.onload=function(){
console.log('{{var2}}');
};
now the jinja code in main.js is not working
Maybe it's not possible to use it in external js?
If someone can help, please reply to this thread.
Share Improve this question asked Jul 18, 2018 at 14:05 vinay nimmalapudivinay nimmalapudi 231 silver badge6 bronze badges 5- 1 Did you remember to put the JS file in a place where the server can access it? – Ignacio Vazquez-Abrams Commented Jul 18, 2018 at 14:07
- is there a way to run a js file within templates folder – vinay nimmalapudi Commented Jul 18, 2018 at 14:16
- The browser runs the JavaScript file. The browser gets the JavaScript file from the server. – Ignacio Vazquez-Abrams Commented Jul 18, 2018 at 14:20
- can you explain it clearly! – vinay nimmalapudi Commented Jul 18, 2018 at 14:32
- currently my server can access javascript file from static folder,but i cannot include jinja code inside javascript file – vinay nimmalapudi Commented Jul 18, 2018 at 14:34
3 Answers
Reset to default 5You need to understand how Jinja works. When you run the mmand
return render_template('main.html', var1 = 1, var2 = 2), it gets processed in the following way:
- The Flask server opens the main.html template
- Renders/replaces all the defined Jinja variables i.e. the context into the template
- Sends the rendered HTML to the client.
Hence the variables are not loaded into the {{ var }} place-holders on the client side but at the server side.
Therefore to achieve what you are trying to do you could do something as follows: In main.html code:
<html>
<body>
<p>The first value is {{var1}}</p>
<script>var var2 = {{var2}};
<script src="main.js"></script>
</body>
</html>
In main.js code:
window.onload=function(){
console.log(var2);
};
Note: We have added the script inside HTML code before calling main.js which the dependent script.
Let me know if this solves your issue and you have understood the explanation.
TLDR; Pass your flask variable to a global JS variable from your HTML file.
I don't think that it's possible to access external JavaScript files directly from Flask. But you can use this hack, it works with many templating languages (Jinja, EJS...)
main.py:
@app.route('/')
def default():
return render_template('main.html', var1 = 1, var2 = 2)
main.html
<html>
<body>
<p>The first value is {{var1}}</p>
<!-- Insert this <script/> tag before loading you main.js -->
<script type="text/javascript"> window.myVar1 = "{{var1}}" </script>
<script src="main.js"></script>
</body>
</html>
main.js
window.onload=function(){
// Now you can access to myVar1 directly
console.log(myVar1);
};
Last week, I encountered the same issue, and I also thought that it was not possible to import external JavaScript files. However, I have now found a solution.
In fact, all your static files should be placed under the "static" folder. This way, whether it's an image, CSV file, or JavaScript, you will be able to access them. For example, if you create a "js" folder inside the "static" folder and place your script there, you can include it in your HTML like this:
<script src="{{ url_for('static', filename='js/your_script.js') }}"></script>
This will allow your script to be executed correctly.