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.
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.
On a previous question i explained that i wanted to store images (at least file name) in a Symfony entity.
I followed the answers and installed ComurImageBundle in my project, by following the tutorial in the Readme.
It seems to work well since it display the button to choose the image, and the image's slot. But the button does nothing. The console print me an error :
TypeError: $(...).fileupload is not a function
It append on the $('#image_upload_file').fileupload({... line in the comur.imageLibrary.js file.
I know that the import order are tricky. I did mine like this:
<head>
...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{my form with the button}
...
Hope that someone has already faces this issue ...
Thank you for your answers.
I saw your comment in the other post and choose to answer you here, If you are using twig forms and blocks so
1/ You have to call the Comur image under "body block" like this
{% block body -%}
{% include "ComurImageBundle:Form:croppable_image_modal.html.twig" with {'include_jquery': false, 'include_bootstrap': false} %}
(your form)
....
{% endblock %}
2/ For Js files calling, you have to call them under "javascript block" , and don't forget the route web call, like this :
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script>var routeweb = "{{ app.request.getSchemeAndHttpHost() }}{{ app.request.getBaseURL() }}";</script>
{% endblock %}
3/ And for to be shure that the image will be uploaded, try to access your form under web directly, means access to
localhost/your_project/web/your_route/new
althought this
localhost/your_project/web/app_dev/your_route/new
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 %}
I'm having a spot of trouble with bootstrap. I started having problems with the links in the nav component not being clickable. The links were fine when typed into the browser, but not when clicked.
I rearranged the order of the script tags at the bottom of the body so the link to jQuery in my Django static directory came first and the links became 'clickable', although it broke other functionality like a menu drop-down and an accordion, which no longer opens.
I've tried moving the script tags into the section, switching them back; tried the development version of jQuery.... nothing seems to work.
What's going on? How can I get both the links active and the javascript functionality to work.
<head>
{% block head %}
# ...
# ...
{% load static %}
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="{% static 'css/bootstrap-responsive.css' %}" rel="stylesheet">
{% endblock head %}
</head>
<body id="body">
{% block body %}
#.....
#.....
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/jquery-1.8.2.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endblock body %}
</body>
After much searching and chin strokng, I realised that in the template I was calling from my view, I had the following:
{% for group in class_groups %}
<li><a data-toggle=**"tab"** href="{% url 'subnav' sub_slug=subj class_grp_slug=group.group_name %}">{{ group.group_name }}</a>
{% endfor %}
when it should actually have been:
{% for group in class_groups %}
<li><a data-toggle=**"tabs"** href="{% url 'subnav' sub_slug=subj class_grp_slug=group.group_name %}">{{ group.group_name }}</a>
{% endfor %}
Both the dropdown and the nav-tab are working now.