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
Related
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>
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.
In my Symfony project, I have two JavaScript files which are loaded in home page:
datetimepicker
autoComplete
When I load the partial view in the home page the JavaScript files are not accessible from the partial view.
How do I avoid loading the same JavaScript files multiple times?
I load my partial views through Ajax
//From my partial view
$(selector).datetimepicker({
//.....
});
$(selector).autocomplete({
//.....
});
Error: $(...).datetimepicker is not a function
$(...).autocomplete is not a function
My guess is that in your base twig file (base.html.twig by default), your including your js files before body ending tag
{% block javascripts %}
<script src=.... />
{% endblock %}
</body>
</html>
If this is the case the behaviour you're getting is normal, you should either:
Include your JS files before echoing your body:
{% block body %}{% endblock %}
The best option would be tu move your JS code from your partial into a separate JS file that you can include after the dependencies.
well cant you just do something like
$.ajax({
success: function(data){
$(selector).datetimepicker({
//.....
});
$(selector).autocomplete({
//.....
});
}
})
i also may help you wrap the js-code in the partial views you load into
$(document).ready(function($) {
});
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.
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 ?