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>
Related
My app's urls.py is:
from django.urls import path
from . import views
app_name = 'javascript'
urlpatterns = [
path('create_table', views.create_table, name='create_table')
My views.py is:
def create_table(request):
row_data = "this is row data"
context = {'row_data': row_data}
return render(request, 'javascript/create_table.html', context)
My create_table.html is:
{% load static %}
<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>
And my create_table.js is:
function create_table() {
document.getElementById("place_for_table").innerHTML = '{{ row_data }}';
}
document.getElementById("create_table").onclick = function() {
create_table()
}
What I am trying to do is to run the create_table.js script on the click of the create_table button which should display "this is row data" text in place for table div element.
However, what gets diplayed is just {{ row_data )).
I have read other similar questions on using Django's variables inside Javascript but as per my understanding they all suggest to do the way I did it, so I am not sure what I am doing wrong.
If you've got an element in your template which you're getting to then detect clicks, why not just do it the other way around where you can then pass the context variable to your JS function?
<button onclick="create_table({{ row_data }})">Click me</button>
By doing that you can inspect the page to see if the data is going to be passed correctly. You'll probably have to pass the data through a filter like escapejs or safe.
Alternatively you could do something like
{% load static %}
<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>
<script type="text/javascript">
var row_data = "{{ row_data }}";
</script>
<script src="{% static 'javascript/scripts/create_table.js' %}">
</script>
The issue with this approach is the scope of variables as you may not want to declare things globally so it could be considered an easy approach, but not necessarily the best solution.
When you write {{ row_data }}, you're using a Django-specific "language" called Django template language which means that the mentioned syntax can only be "understood" by Django templates.
What you're doing here is loading a separate JavaScript file in which the Django template syntax simply won't work because when browser comes to the point to evaluate that file, {{ row_data }} will look just another string literal, and not what you would expect to.
It should work if you inline your JavaScript example directly into the Django template.
Alternatively you could somehow "bootstrap" the external JavaScript file with the data available in the Django template, here's how I would go about doing that:
create_table.html
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>
<script type="text/javascript">
$(function() {
var create_table = Object.create(create_table_module);
create_table.init({
row_data: '{{ row_data }}',
...
});
});
</script>
Note: wrapping the above code in the jQuery's .ready() function is optional, but if you're already using jQuery in your app, it's a simple way to make sure the DOM is safe to manipulate after the initial page load.
create_table.js
var create_table_module = (function($) {
var Module = {
init: function(opts) {
// you have access to the object passed
// to the `init` function from Django template
console.log(opts.row_data)
},
};
return Module;
})(jQuery);
Note: passing jQuery instance to the module is optional, it's just here as an example to show how you can pass an external dependancy to the module.
I've found a solution to avoid the extra typing of all the previous answers.
It's a bit hacky:
Just transform you myjavascriptfile.js into myjavascriptfile.js.html and wrap the code in a <script>...</script> tag. Than include them instead of linking them in your template file.
myTemplate.html
....
{% block js_footer %}
{% include "my_app/myjavascriptfile.js.html" %}
{% endblock js_footer %}
myjavascriptfile.js.html
<script type="text/javascript">
console.log('the time now is {% now "Y m d H:i:s" %}');
...
</script>
What I did was to include the javascript/jquery inside
{% block scripts %}
and use the the Django specific data as follows:
`
$.ajax({
type:"GET",
url: "/reserve/run/?ip={{ row_data }}",
dataType: "html",
async: true,
}).done(function(response) {
$("#Progress").hide();
$('#clickid').attr('href','javascript:ClearFlag()');
var win = window.open("", "MsgWindow");
win.document.write(response);
});
`
instead of writing the function in a separated js file, write it in script tags within your html page, so it can use the django template language
I have searched SO regarding this topic without much success and I hope this is not a duplicate after you go through the entire problem description.
Let me say I have a variable countryList, a JSON text, returned from Django view context to the template and I inserted it directly into the body:
<body>
{% if countryList %}
[Blocks for other codes]
{% endif %}
</body>
What I found is that if I want to access the content/value of countryList from a JavaScript(JS), I have to place this JS code inside the [Blocks for other codes]. In this way, I can directly access the content via, for example var cList = '{{ countryList }}'; inside a jQuery(document).ready() function.
However, I attempt to access the same variable from an external JavaScript file (country.js) loaded to this HTML in the following way
<script type="text/javascript" src="{% static 'country.js' %}"></script>
<body>
{% if countryList %}
[Blocks for other codes]
{% endif %}
</body>
then using var cList = '{{ countryList }}'; inside this file only gives me a string variable {{ countryList }}.
There is no issue with Django settings and the country.js can be loaded properly. This makes me wondering if it has something to do with the scope. I understand that Django variables of such are directly inserted into the HTML as text. Then, where on this HTML page does such a variable reside? How can I access it from a JS file loaded to this page?
Note added: I am aware of that I can insert a script into [Blocks for other codes] to store this variable to local or session storage and then allow it to be accessed from JS file. But I intend to do it in just one file.
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.
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>