I want to add Javascript file that should be loaded in dev environment only, not in prod.
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
How can I modify this example to disable it's loading in prod?
Use {{ app.environment }}
Try this :
{% if app.environment == 'dev' %}
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endif %}
Related
I have a django project I am working on, and I am pretty new to Django and Python in general. I have created my base.html as the following:
{% load adminlte_helpers i18n %}
{% load static %}<!DOCTYPE html>
<html>
<head>
{% block stylesheets %}
{% include 'adminlte/lib/_styles.html' %}
{% endblock %}
{% block body %}
....
{% endblock body %}
{% block javascript %}
{% include 'adminlte/lib/_scripts.html' %}
{% endblock %}
{% block extra_js %}
{% endblock %}
</body>
</html>
After that I have created my _scripts.html file as the following:
{% load static %}
{% block scripts %}
<script src="{% static 'admin-lte/plugins/jquery/jquery.min.js' %}"></script>
<script src="{% static 'admin-lte/plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<script src="{% static 'admin-lte/plugins/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js' %} "></script>
{% block datatable_js %}{% endblock %}
{% endblock %}
Now I want to to add in a new html file named example.html a chart created with charts.js. Now I have created it and added in the example.html. But If I try to created a new js file (named graph.js) in my static folder does not work.
In which part of my code I have to insert <script src="{% static "grafici/graph.js" %}"></script> to load it correctly?
this my setting:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT= '/static/'
Try to run this CMD
"""
python manage.py collectstatic
"""
I'm facing a new problem with django. I'm developping a website (so I'm not in the production step) and I want to use javascript in my template.
When I write my script directly on my template and link it to a button the script works. But when I want to import it from a .js file it doesn't works anymore.
My static directory seems to work correctly, I can import css or even images from it.
Here is my files :
base.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% load static %}
<title>Title</title>
<link rel="stylesheet" href="{% static 'webcalendar/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'webcalendar/css/style.css' %}">
{% block script %} {% endblock %}
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>
fonction_test.html : where the script is directly written in the template
{% extends 'webcalendar/base.html' %}
{% block script %}
<script type="text/javascript">
function printInConsole(){
console.log("PRINTING...")
}
</script>
{% endblock %}
{% block content %}
<button onclick="printInConsole()" class="btn btn-warning">Print in console</button>
{% endblock %}
So the previous one is working.
But if I try to import the script from a .js file in the static folder of my app it doesn't works.
calendar.js :
function printInConsole(){
console.log("PRINTING...")
}
new fonction_test.html : where I try to import the script from the .js
{% extends 'webcalendar/base.html' %}
{% load static %}
{% block script %}
<script type="text/javascript" scr="{% static 'webcalendar/js/calendar.js' %}"></script>
{% endblock %}
{% block content %}
<button onclick="printInConsole()" class="btn btn-warning">Print in console</button>
{% endblock %}
I get the following error :
ReferenceError: printInConsole is not defined
I must have done something wrong, do you have any tips to solve this ?
To my mind, your issue comes from your syntax :
<script type="text/javascript" scr="{% static 'webcalendar/js/calendar.js' %}"></script>
Please change scr="" by src="
<script type="text/javascript" src="{% static 'webcalendar/js/calendar.js' %}"></script>
If you're statics are well-defined, it should work.
In my symfony 2 application, I have :
<link href="{{ asset('stylesheets/backend/plugins/fullcalendar/fullcalendar.print.css') }}" rel='stylesheet' media='print'>
I also have a vendor css file which modifies it and needs to be placed after. This one is included in my {% stylesheets %} block :
{% stylesheets
'stylesheets/backend/style.css'
filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Now the thing is if I put the css for print in the stylesheets block, I lose the media=print argument and things get messed.
How can I include a css into a stylesheets block and restric its usage to a print media query ?
Thanks a lot
There are a couple of ways to approach this:
1) You could separate your print-specific stylesheet into a new stylesheets block (you can have as many of these as you need), and simply add the media='print' attribute to the <link> element.
It would look something like this:
{% stylesheets
'foo.css'
'bar.css'
filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets
'vendor_stylesheet_with_print_styles.css'
filter='?yui_css, cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" media="print" />
{% endstylesheets %}
2) If you don't need to support IE8, you can use a media query inside the CSS file that needs to modify it:
#media print {
... styles go here ...
}
I'm trying to extend a template which contains this block:
{% block headerjs %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
{% endblock %}
To extend it, I'm using {{ block.super }} :
{% block headerjs %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}js/formhandler.js"></script>
{% endblock %}
It is not working, {{ block.super }} is empty. I have noticed that <script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script> is the reason. When I don't load this script, everything works fine. Does anyone know why?
Since Django 1.5, you have to put quotes around views names in the {% url %} template tag. Otherwise, it'll be considered as a context variable now (so it'll search the variable django if exists and get its attribute views and so on...).
The correct version, as pointed out in comments is:
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
Maybe it was working before because you were using Django <= 1.4.
I try to import the JS file into my html.twig file. But it doesn't work. Could you give me some suggestions?
this is my layout file
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/bootstrap.css') }}" type="text/css" media="all" />
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/layout.css') }}" type="text/css" media="all" />
<link href="asset('bundles/ensjobologic/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/ensjobologic/css/flat-ui.css') }}" type="text/css" media="all" />
{% endblock %}
{% block javascripts %}
{% endblock %}
</head>
this is the child file:
{% block javascripts %}
{{ parent() }}
{% javascripts 'js/jquery.tagsinput.js' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock %}
the css work well. But the js file don't have any effect.
asset() is not assetic. You don't have to speficy the asset in the javascripts macro. See how to use assetic and inlcude javascripts
{% block javascripts %}
{{ parent() }}
{% javascripts '#EnsUserBundle/Resources/public/js/jquery.tagsinput.js'%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Take notice at the asset_url variable.
EDIT: For dev the assets are delivered by a controller (in default settings), so every change is detected. Only after adding new files a cache clear is needed.
for prod you need to dump them to a physically file under the web path with
php app/console assetic:dump --env=prod --no-debug