What is the best way to pass a variable from a Flask template into the Javascript file? Here is my code
I have a simple view in my webapp:
#webapp.route('/bars')
def plot_d3_bars():
return render_template("bars.html", calendarMap = calendarMap)
I have a templated HTML file that looks like this:
{% extends "base.html" %}
{% block title %} Bar View {% endblock %}
{% block content %}
{% with calendarMap=calendarMap %}
{% include "buttons.html" %}
{% endwith %}
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/static/css/d3.tip.v0.6.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Custom codes for d3 plotting -->
<link href="/static/css/bars.css" rel="stylesheet">
<script> var calendarMap = {{ calendarMap|tojson }}; </script>
<script src="/static/bars.js"></script>
{% endblock %}
Previous answers told me that I could just jsonify the variable into a JSON object and I'll be able to use it. However, I want to use calendarMap inside of bars.js? but I am running into some scoping problems (i.e. bars.js doesn't recognized this calendarMap), what should I do instead?
Well, maybe it is too late, but here we go.
When you use a JavaScript code embedded in HTML code, this script will be rendered together with HTML. So any variable referenced in JavaScript, as a Flask variable, will be available in the page rendered.
When you use an external JavaScript file linked in HTML code, its code already exists, before the HTML be rendered. In some cases, I may say most of them, you aren't the owner of this file. So any variable referenced in JS file will not be rendered.
You may put this variable in HTML, via JS code, and consume this data with functions from foreign JS file.
Or you can render this JS file, before render the template, and use it. But I strongly recomend not to use this approach.
Related
I'm having issues calling functions from twig views in Symfony 4.4. This view is called UserList.html.view and it extends base.html.twig
The beginning of the file is as following :
{% extends 'base.html.twig' %}
{% block body %}
{% block javascripts %}
<script src="{{ asset('build/js/custom.js') }}"></script>
...
I also tried with Encore by adding an entry but it's not working. The only way to access external functions is to call them from the parent view which is not what I want obviously.
The error I get :
Uncaught ReferenceError: coucou is not defined
at HTMLButtonElement.onclick (VM3883 manageAccounts:183)
onclick # VM3883 manageAccounts:183
I read some other posts about this but none of them actually provided a working solution.
Thank you for your help !
Hello there and welcome to SO forums. It is hard to put a finger on your issue based on the provided pieces of code - but the twig block usage might be something that is not implemented / working as you assume. Namely the javascript block inside the implemented body block has no relevancy to the a similarly named block in base template (I assume that there is similarly named block there) because it is placed inside the body block which you are completely overwriting in this UserList.html.twig template.
A basic working twig structure would be something like this:
base.html.twig
<html>
<head>
...
</head>
<body>
...
{% block body %}
...
{% endblock %}
...
{% block javascripts %}
...
{% endblock %}
...
</body>
</html>
UserList.html.twig - please note the parent() call that makes sure that the block contents from the inherited template are included as well (i.e. if you have some generic jquery or some other generic js includes defined there) - without the parent() you will be defining the javascripts block contents completely again in this template.
{% extends 'base.html.twig' %}
{% block body %}
...
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/custom.js') }}"></script>
{% endblock %}
I hope everyone is doing great during this troubles times ! France started containment last week so I had plenty of time finding the solution.
Dumbest thing ever but I didn't know that..
In your js external files, you have to declare your functions like this :
window.myfunction = function myfonction(){}
That's all..
Could that potentialy cause security issues ? I don't know so I'm asking xD
My js code is in the .html django template inside a block, this way:
{% extends 'base.html' %}
... some blocks here ...
{% block javascript %}
<script>
$(document).ready(function () {
...
});
</script>
{% endblock %}
Now I need to use in the js code some context vars passed from the view to the template. I used a option where I declared in an html element a data attr using django template syntax {{ ... }}
<div id="order_id" data-order-id={{order.id}}>
and with jq I got this element and read the data value. This way:
var orderId = $("#order_id").data('order-id')
this works fairly well, but I realized if I have the code in the same .html I can use the django template expressions as part of my js code. This way:
var orderId = {{ order.id }};
var changeStatusUrl = "{% url 'orders:change_status' %}"
This works fairly well too, so my question is if this is a good practice to follow with, or if this has some drawback that I will face in the future.
If the proyect is medium sized. What I normally implement is to have a separate JavaScript file. Before the import of the file I generate the needed variables from Django template expresions.
For instance if drawing a line graph. My variable data would have the needed values. Then I would import a script that buids in top of the variable.
<script>var data = [{% for s in stats %}{{s}},{% endfor %}];</script>
<script src="{% static "myapp/js/line.js" %}"></script>
my problem is a bit unusual.
In my project I have a static js file with many functions defined there.
Then in each template I have a script tag where I define the necessary variables for this templates and call the function i need from the static file. And the view does nothing but rendering the template. So my template looks for example like :
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
{% block content %}
<script type="text/javascript">
$(document).ready(function(){
var first_var = 'foo';
var second_var ='bar';
my_function(first_var,second_var);
})
</script>
<div class="values"></div>
{% endblock %}
</body>
And the view simply looks like :
def my_view(request):
return render(request, 'my_app/my_template.html')
What I have to do, is instead of having to manually write the script tag in the template, have a custom template tag to which you can pass the variables needed and that will return the corresponding script. The reason i have to do that is to allow people who will use the app to avoid writing script and only wirte something like :
{% my_function 'foo' as first_var %}
I don't really know how to do this or if it's the right way to do so. The main point is using custom tags instead of wiritng the script, so how do you think this should be done ?
Can I use Django's template tags inside Javascript? Like using {% form.as_p %} in jQuery to dynamically add forms to the page.
Yes, I do it frequently. Your javascript has to be served through django, but if you just have it in the html header as inline javascript you'll be fine.
E.g: I use this to put prefix on a dynamic formset I use.
{% extends "base.html" %}
{% block extrahead %}
<script type="text/javascript">
$(document).ready(function() {
{# Append fields for dynamic formset to work#}
{% for fset, cap, _, tid in study_formsets.fset_cap_tid %}
$(function() {
$('.form_container_{{ tid }}').formset({
prefix: '{{ fset.prefix }}',
formCssClass: '{{ tid }}',
extraClasses: ['myrow1', 'myrow2']
});
});
{% endfor %}
});
</script>
{% endblock %}
Note in "base.html" I have a html head where the jquery libraries are loaded, that contains {% block extrahead %}{% endblock %}.
You can't use Django's template tags from your Javascript code if that's what you mean. All the Django variables and logic stop existing after the template has been rendered and the HttpResponse has been sent to the client. At that moment when Javascript executes, the client (browser) has no notion the variables you rendered the template with (such as "form").
What you can do is have Javascript modify your HTML page using chunks of HTML that were rendered by your Django template.
If you want to generate HTML on client side, I'd recommend to look at client side tempalte libraries (eg. JQuery Templates - use those with the {% verbatim %} templatetag).
If you want to use variables inside your rendered javascript I (that's my opnion), think it's a bad idea. But if all you want is to generate URL for your views, media and static files, I do this a lot.
Take a look to this github: jscssmin
Yes, you can use`
Example : `{{ user.username }}`
Be sure this is not single quotes but '(back tick / back quote)
Yahoo's Best Practices for Speeding Up Your Website states:
Put Scripts at the Bottom
That there are two types of scripts in my Django application:
Scripts included in my base (e.g. inherited) template; and
Scripts written inside templates instantiated by templatetags
Scripts to support UI controls are necessarily a part of the template for their supporting template tag to handle stuff like unique IDs and to keep dependent code together.
The problem is that if I follow Yahoo's advice and put the libraries (#1) at the bottom of the page, 100% of the scripts included inline (#2) will fail because the libraries haven't been loaded and parsed yet.
I can't extend a {% block %} element in my base template because anything I do within the context of the templatetag won't propagate outside it -- by design, to avoid variable name conflicts (according to Django's documentation).
Does anyone have any idea how I can defer JavaScript from my templatetags' templates to render at the bottom of my base template?
I usually have a base template setup like this.
<html>
<head>
{% block js-head %} Tags that need to go up top {% endblock js-head %}
</head>
<body>
{% block header %} Header {% endblock header %}
{% block body %} Body goes here {% endblock body %}
{% block footer %} Footer {% endblock footer %}
{% block js-foot %} All other javascript goes here {% endblock js-foot %}
</body>
</html>
Then I can extend this base template and only override the blocks that I care about. I put all javascript that doesn't have to be in the header in js-foot and because it is at the bottom of the template it will load last. If you have have to move where your javascript loads you just need to move the js-foot block around in the base template.
Nothing fancy but it works.
Wrap the scripts that you're including inline in
jQuery(function(){ ... });
Which will execute when the the DOM is ready and scripts have been downloaded.
Another option might be to create some kind of custom template tag like:
{% inlinescript %}
// some javascript code.
{% endinlinescript %}
Which you could use to aggregate inline scripts as execution proceeds. You'd need aggregate this data as your template gets parsed - which gets tricky because template tags have different contexts and this is something you'd want to store in a global context in a custom variable, say inline_scripts.
I'd look at the way Django implements the various with ... as .. constructs in the default template library for an example of how to add your own variable to a context.
Then at the bottom of your page you could do {{ inline_scripts }}.
The easiest solution is the jQuery.ready(function(){}) / jQuery(function(){ }) (The two methods are synonymous).
Or you might want to reconsider Yahoo's advice. There are positive things about inlining your javascript - it can reduce FOUC / FOUBC (Flash of unbehavioured content). Yahoo tends to get kind of pedantic - (just look at the YUI API ;). If you need to rewrite parts of your application for what's going to be moderately perceptible performance improvement, it might not be worth it.
To do the script aggregation (originally based off captureas on django-snippets):
#register.tag(name='aggregate')
def do_aggregate(parser, token):
try:
tag_name, args = token.contents.split(None, 1)
except ValueError:
raise template.TemplateSyntaxError("'aggregate' node requires a variable name.")
nodelist = parser.parse(('endaggregate',))
parser.delete_first_token()
return AggregateNode(nodelist, args)
class AggregateNode(Node):
def __init__(self, nodelist, varname):
self.nodelist = nodelist
self.varname = varname
def render(self, context):
output = self.nodelist.render(context)
if context.has_key(self.varname):
context[self.varname] += output
else:
context[self.varname] = output
return ''
Usage:
{% aggregate inline_scripts %}
var foo = 'bar';
{% endaggregate %}
... template code
{% aggregate inline_scripts %}
var baz = 'bar';
{% endaggregate %}
... somewhere near the bottom of your page
{{ inline_scripts }}
There is an application django-sekizai just for that
This worked for me. Wait till the dom loads...
<script>
document.addEventListener("DOMContentLoaded", function (event) {
{% if my_var %}
doSomething({{myVar}});
{% endif %}
});
</script>