i set it up STATICFILES_DIRS STATIC_URL in settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'projectName', 'static'),
]
and i want to use javascript files in template but it is not working.
js file path is app/static/app/new.js
and i used it in template using this code
{% load static %}
<script type="text/javascript" src="{% static "app/new.js" %}">
$(document).ready(function(){
alert(1);
new_function();
});
</script>
function in new.js as well as alert does not working.
If I delete the src part in script tag, the alert works fine.
I can see the new.js script by accessing the path that appears in the chrome developer tool.
What did I do wrong?
Related
here is my settings.py:
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIR = [STATIC_DIR]
here is the end of my html page:
{% load static %}
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
</html>
{% endblock %}
I have a folder static and inside it, there are two more folders one is js and the other is css. But when I try to load it, it always says "GET /static/js/script.js HTTP/1.1" 404 1795 I have tried many things but it does not work. Someone please help.
If it is development server (i.e DEBUG = True), then try this:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
'static',
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
If it is production server, then you simply remove the STATICFILES_DIR. The official documentation explains this more in depth.
How to import inside JavaScript files and using Django to load another js.
Statements like these don't work:
import { PolymerElement, html } from '{% static "#polymer/polymer/polymer-element.js" %}';
import '{% static "#polymer/app-layout/app-drawer/app-drawer.js" %}';
And also these too:
import { PolymerElement, html } from '#polymer/polymer/polymer-element.js';
import '#polymer/app-layout/app-drawer/app-drawer.js';
// myapp-shell.js
import `${static_path}`;
//....
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<script src="{% static 'node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js' %}"></script>
<script src="{% static 'node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js' %}"></script>
<!-- Loading app-shell -->
<script>
var static_path = '{% static "my-icons.js" %}';
console.log(static_path);
</script>
<script type="module" src="{% static 'mycomponents/myapp-shell.js' %}"></script>
</head>
<body>
<myapp-shell></myapp-shell>
</body>
</html>
Is there is a way to do that without bundling the code in one big file, nor calling all files may be needed in the html file.
Thank you
It's definitely not right to use Django template tags inside your JS files, since they will not be processed by Django's template loader. I'd suggest either:
(a) Use only relative path imports in your JS files.
or
(b) Set up your Django STATICFILE_DIRS setting to include the node_modules directory and setting STATIC_ROOT to something like '/static'. Then do your module imports as import { x } from '/static/path/to/module'.
EDIT: Grammar
I searched that for a long time and the way I found to do that is:
inside your mains script use this function.
function include(file) {
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
then load your script like this:
include('/static/js/your_js_file.js');
don't forget to register your static files directory in settings.py
example:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "your_folder of library"),
]
Mabe you can use a global variable at top of your js importations, because static it's only for django template, you can do something like this inside your template file:
<script>
var static_path = '{% static "#polymer/polymer/" %}';
</script>
end then import your js files using this path
import { PolymerElement, html } from `${static_path}/polymer-element.js" %}`;
I'm starting a project and following the documentation I didn't succeed to include javascript.
Here is my settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
)
So I have a static folder create in my project with a javascript file.
myproject/static/app.js
my urls.py:
urlpatterns = [
url(r'^$', 'app.views.home'),
url(r'^admin/', include(admin.site.urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and in my template:
this is myproject/templates/base.html:
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
My other template:
{% block content %}
hello world
{% endblock %}
I have the "hello world" on
http://127.0.0.1:8000/
but i do not have my image or script.
I tried so many different things but I never succeed
urls.py
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
]
settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
# remove STATIC_ROOT
base.html
Your title tag was not closed.
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
Your template should say {% load staticfiles %} instead of {% load static %}
Source:
https://docs.djangoproject.com/en/1.8/howto/static-files/
Also, os.path.join(BASE_DIR, "static"), only looks for static files in your apps, as in app/static/app/static.js. If you have static files that do not belong to any specific app, but rather to the project, you need to add the folder explicitly. See point 4 of 'Configuring static files' on the docs page I mentioned.
From my understanding, the STATICFILES_DIRS should be in the settings.py and defined like this:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
Please check the documentation.
I am new at programing thus take my points with a pinch of salt. There i go. maybe you have more apps meaning you gotta check your tree as it should go as the django documentations points.
meaning that you should have your_app/static/your_app/in here you must put three more folders corresponding to css, images and js all with their respective files.
Also notice that your static url should be named diferent than your static root.
Once you have done this you must tell django where to find the statics for each app thus you gotta state it within the STATICFILES_DIRS.
After all this then you gotta run the collectstatic command.
I´m still missing the part in which you connect the js files of each app to the template.. so I cannot further help you dude.... hope it helps a little bit
Create directory named 'static' at base directory. i.e. at similar level to project directory.
Then add following in settings.py
STATIC_URL = '/static/'
#setting for static files
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) code here
I currently use
<script type="text/javascript" src={% static 'app.js' %}></script>
to retrieve my JavaScript file.
However, app.js tries to use Jinja2 tags with are not translated when I import my script in this fashion.
An example, of a line causing an error in app.js would be
$('#tag').click(function() {
window.location.href = "{% url 'Project.views.views.viewname' %}";
});
How do I force {% url 'Project.views.views.viewname' %} to be translated to a url if it is located in an external JS file?
I AM getting the following error:
ReferenceError: Can't find variable: gettext
I have added the following in my urls.py:
js_info_dict = { 'domain': 'djangojs', 'packages': ('my_project_name',), }
urlpatterns += patterns('', (r'^jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict), )
I marked the string for localization as :
var lingualText = gettext("Are you sure you want to delete the photo?");
var statusConfirm = confirm(lingualText);
I have added the following line in my template:
<script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
To generate the language file for the text inside javascript file, I use the following command:
python /usr/bin/django-admin.py makemessages -d djangojs -l de
I am able to generate the djangojs.po file for the desired language. And I also get all the strings marked in the JS file. When I see the output in Firebug, I see the above error i.e.:
ReferenceError: Can't find variable: gettext
Can anybody tell me where am I going wrong? Am I having the problem with the path for jsi18n ?
Thanks in advance.
getext() is provided by the {% url django.views.i18n.javascript_catalog %} script, so make sure it is included before your own code is, e.g.
<html>
<head>
<script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
<!-- gettext() is now available -->
<script src="{{ STATIC_URL }}my_script_using_gettext.js"></script>
...