I am currently working with a Django project, I include different libraries JS and I create JS files for manage the other libraries, but I don't know the correct organization of JS files for each html page, for example, I have a "Main.js" and "Milk.js" in base template but I don't want have both files in the same base template, I want separate files for each page..
I tried adding as a normal js file
<script src="{{ STATIC_URL }}js/milk.js"></script>
But it show me a error message asking me several dependencies when inherited from base.html
I hope your help
EDITED:
Cuando he añadido en mis archivos de plantillas, sin mostrarme error en la consola de cromo pero en la consola django mostrarme los archivos JS de carga con 304 error.
The libraries are in base.html
it's strange, I can load milk.js when I click from home.html but when I will click in other page for example "cow.html" from "Milk.html" no load js file even when I did the same as "milk.html".
Django template engine has already provided a tag for inherit your HTML structure called 'extend'.
Tag "extends" is a using for extends a parent template.
{% extends "base.html" %} uses the literal value "base.html" as the name of the parent template to extend.
base.html is the parent template that can extendable.
{% load staticfiles %}
<html lang="en">
<head><title>Hello World</title></head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
{% block scripts %}
<script src="{% static 'js/main.js' %}"></script>
{% endblock %}
</body>
</html>
and you have another HTML called milk.html that you need everything same as the base.html but include milk.js you just do something like this.
{% load staticfiles %}
{% extends "base.html" %}
{% block scripts %}
<!-- block.super will get the content of the block from the parent template -->
{{ block.super }}
<script src="{% static 'js/milk.js' %}"></script>
{% endblock %}
Read more about docs[1]: [1]: https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatetag-extends
In your base.html file, add a block inside the head tag like this:
{% block scripts %}
<!-- some default content here -->
{% endblock %}
Now in your different templates files:
{% block scripts %}
<!-- insert per template scripts here -->
{% endblock %}
So in the templates with Milk, it would be like:
{% block scripts %}
<script src="{{ STATIC_URL }}js/milk.js"></script>
{% endblock %}
Being lazy, and extending the admin templates with {% extends admin/base.html %} I found that using {% block scripts %} did not work. The JavaScript was not sent to the browser. However base.html has a built-in block {% block extrahead %} which is empty and just the ticket for inserting additional content like scripts into the header.
{% block extrahead %}
<script src="{{ STATIC_URL }}js/milk.js"></script>
{% endblock %}
Related
I am using Flask with boostrap version Flask-Bootstrap==3.3.7.1 for my webapp.
Lighthouse is telling me these are vulnerable:
Bootstrap#3.3.7
jQuery#1.12.4
My code that is related to these is very minimal and looks like this:
index.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
...
base.html
{% block head %}
{{ super() }}
{% endblock %}
...
{% block scripts %}
{{ super() }}
{% endblock %}
When I inspect the html code I see that these are being including with the super():
//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
How can I fix this? My flask-boostrap is already at the most recent version.
I want to add custom JavaScript everytime as per the logic in my backend.
For example:
--views.py--
...
js="JavaScript which i want to add"
js_={'js_script':js}
return render(request,'html.html',context=js_)
--html.html--
....
<script>
{{js_script}}
</script>
But this does not properly work and a weird " is added in various places in the html source code everytime and the work is not accomplished. Please Help if you have a work around.
Just tried something and it worked.
source: django docs - safe templatetag
in context you are doing it right example:
context = {
'js_var': 'console.log("JavaScript which i want to add")',
}
in template add template tag "safe" it will remove the """ 's:
<script>
console.log('sanity check');
{{js_var|safe}}
</script>
output:
sanity check
JavaScript which i want to add
Have a good day!
Tell me if this worked for you!
i think you want to load custom javascript code locally for particular page, to do that the proper way without mixing things, you need to define {% block %} in your base.html template and via DTL inheritance mechanism you can load you javascript the right way in right order without any conflict
in base.html define, let say {% block javascripts_local %}{% endblock %} like
{% load static %}
<!doctype html>
<html class="no-js" lang="{% block lang %}en{% endblock %}">
<head>
[..]
</head>
<body{% block body_attributes %}{% endblock %}>
[..]
{% block javascripts %}
<!-- i'm using HTML5 Boiler Plate template -->
<script src="{% static 'js/vendor/modernizr-3.7.1.min.js' %}"></script>
<script src="{% static 'js/plugins.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- override this block in child template -->
{% block javascripts_local %}{% endblock %}
{% endblock %}
</body>
</html>
and then in your child template override the block
{% extends 'base.html' %}
{% load static %}
[..]
{% block javascripts_local %}
<script>
// Your javascript code goes here
</script>
{% endblock %}
I have a base_generic.html page in django that has the standard UI elements (navbar, footer, etc.), and I have a list.html page which extends the base_generic.html page. The list.html page is using a javascript function that is only used in this page, but for it to work, I have to include it in the base_generic.html page.
How can I include this javascript function in list.html using Django's built-in template tags and features?
Should I use {% verbatim %} or {% scripts %} or another tag template?
Should I include this inline with the {% block content %} that has the html for this django template, or should I place it before or after the {% block content %}?
You have several ways of accomplish what you want:
Just add the javascript snippet inside the {% block content %}
{% block content %}
my javascript();
{% endblock content %}
Use the include statement to a file with your javascript, again, inside the {% block content %}
{% include 'my_javascript.html' %}
In this way, you can reuse your javascript code on other pages.
Create a new block in base_generic.html, like:
{% block my_javascript %}{% endblock my_javascript %}
And in you child template, add the javascript as told in the first points iside these tags, in this case it can be outside or inside the {% block content %}.
An alternative would be pass the path for the js file in your views.py:
context = {
'scripts_to_include':['/static/js/my_js_file.js']
}
You can obviously include multiple js files here. Then, in your template:
{% if scripts_to_include %}
{% for script_url in scripts_to_include %}
<script src="{{script_url}}"></script>
{% endfor %}
{% endif %}
I like this, cause the js files can still be stored in a directory (instead of putting it right into html), JS files are also reusable.
I have a question about, how to separate a loading specify javascript file of specify template twig file.
I got for example admin.html.twig which extends base.html.twig, in base i got
{% block javascripts %}
<script src="/assets/js/core/jquery.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap-material-design.min.js"></script>
<script src="/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.j"></script>
<script src="/assets/js/plugins/chartist.min.js"></script>
<script src="/assets/js/plugins/bootstrap-notify.js"></script>
<script src="/assets/js/material-dashboard.min.js"></script>
<script src="/assets/demo/jquery.sharrre.js"></script>
<script src="/assets/js/sparkline.js"></script>
<script src="/assets/js/plugins/chartjs.min.js"></script>
{% endblock %}
and I got next file like dashboard.html.twig which extends a admin.html.twig file, and my question is that in dashboard.html.twig file i got at the a little writed-self small javascript code, and this javascript of course use a jquery library but this library i loaded in base.html.twig file a next of my selfwrited script which is in dashboard.html.twig.
My question is, how i can for example load my small code of javascript (of course i can save it in separated file like mycode.js) but how to load only when this route of dashboard.html.twig file i used and after jquery is loaded ? becouse in another routers i dont need this mycode.js so I dont wanna put it to base.html.twig file in javascript block, any idea ?
If dashboard directly extends admin then u can do the following to ensure to load all the admin scripts and to add the dashboard specific script:
{% extends "admin.html.twig" %}
{% block javascripts %}
{{ parent() }} {# execute the parent block, thus loading all scripts in admin #}
<script src="/assets/js/dashboard/mycode.js"></script>
{% endblock %}
You can dived
{% extends "admin.html.twig" %} {# use only in case your all templates are at the same places like app/Resources/views/admin.html.twig #}
{% block javascripts %}
{{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
<script src="/assets/js/dashboard/code.js"></script>
{% endblock %}
in case you are trying to extend a template from another bundle then you can use this
{% extends "YourBundleName:Default:admin.html.twig" %} {# YourControllerRelativeName just in case your view structure is like views/Default/admin.html.twig#}
{% block javascripts %}
{{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
<script src="/assets/js/dashboard/code.js"></script>
{% endblock %}
to the better understanding you should read a little here:
https://symfony.com/doc/2.8/templating.html
Note:- in the documents you should change version as per your current version.
I would suggest the following solution.
Declare the following block in base.html.twig after {% block javascripts %}{% endblock %}
{% block javascript_page %}{# specific code for current page #}{% endblock %}
Then in your page you can include page specific scripts
{% extends "admin.html.twig" %} or {% extends "base.html.twig" %}
{% block javascript_page %}
<script src="/assets/js/pages/my_page.js"></script>
{% endblock %}
Although answer by DarkBee is also correct but in this way you don't have to worry about calling {{ parent() }} in each page.
Suppose I have the following twig templates:
base.html.twig:
<html>
<body>
{% block javascripts %}
{% javascripts
'../app/Resources/js/jquery-2.2.4.min.js'
'../app/Resources/js/base.js'
filter='uglifyjs2' output='main.js'
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock javascripts %}
</body>
</html>
page1.html.twig:
{% extends 'base.html.twig' %}
{% block javascripts %}
{{ parent() }}
{% javascripts
'../app/Resources/js/page1_specific.js'
'../app/Resources/js/page1_other.js'
filter='uglifyjs2' output='page1.js'
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock javascripts %}
With this code, page1 template will make two javascript requests, one for main.js and another one for page1.js.
Is it possible to write it differently, so I it would generate only one big js file specific to each final template, including the base page js and the page1 specific js?
You can declare in your config.yml the base js, like this:
assetic:
assets:
base:
inputs:
- '#AppBundle/Resources/public/js/jquery-2.2.4.min.js'
- '#AppBundle/Resources/public/js/base.js'
And call this in your javascript block:
{% javascripts
'#base'
'../app/Resources/js/page1_specific.js'
'../app/Resources/js/page1_other.js'
filter='uglifyjs2' output='page1.js'
%}
You can find more info here.