I am trying to use the https://clusterize.js.org/ javascript package with my Django website for displaying extremely large tables neatly and speedily. I downloaded the package's necessary js and css files, and referenced them in the html getting loaded when i visit my site's url: mysite.com/popularify
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- uncommenting this line loading status files causes errors
<script src="{% static 'js/clusterize.min.js' %}"></script>
-->
<!-- I have a static/js/ folder -->
</head>
<body>
<div>
arthur russell = spotify:artist:3iJJD5v7oIFUevW4N5w5cj <br>
<!--HTML-->
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div id="scrollArea" class="clusterize-scroll">
<table>
<tbody id="contentArea" class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading data…</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// clusterize JavaScript
var data = ['<tr>x</tr>', '<tr>z</tr>', '<tr>zxc</tr>'];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
</script>
</body>
</html>
{% endblock content %}
And ensured that I have the two files in that location, when I try to access my site i am getting a 404 error only when I uncomment the line in my html file referencing the django static file.
My settings.py Django file has :
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
How can I make my html page load these static files ?
Looks like chrome version may not be compatible or it has something to do with the chrome extensions.
What you can do is to block background.js using this code:
$(document).ready(function(){
$.getScript("urlofscript");
});
To get the URL, hover on the background.js written on the inspection menu.
Hope this helps!
You path to other static files also doesn't seem to be correct
Django template support staticfile tag, so in your template at the top add load staticfile and include the static tag and the path is inside your static folder like so :
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<script src="{% static 'js/custom.js' %}"></script>
Related
I have created django template as:
{% extends '_base.html' %}
{% block title %}Checker{% endblock title %}
{% block content %}
<div class="container">
Click to open a pdf
</div>
{% endblock content %}
Whenever I try open that link Click to open a pdf it doesnot open that link.
I try this same process in plain html template it works as:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
</head>
<body>
<h1>Opening a folder from HTML code</h1>
<a href="D:/Plagiarism Checker/plagiarismchecker/assignments/datasets/file161.pdf">Click to open a
folder</a>
</body>
</html>
I want to open that link from django template. But I cannot open that path. I will be very thankful if you can resolve this problem. Thank you!!!
You need to inform Django about the paths where you want it to look-up a file by adding the paths to STATICFILES_DIRS in settings.py.
Check out the documentation here
Once you have added say up to the plagiarismchecker folder in STATICFILES_DIRS, you can call the file from the template like this <a href="{% static 'assignments/datasets/file161.pdf' %}">
You paths need to be relative to the paths in STATICFILES_DIRS
When I am working outside Django file, everything works fine with javascript reading classes and Ids like
document.querySelector('.class_name').addEventListener
But when loaded in Django projects it gives an error that eventlistner can't read NULL.
{% comment %} css file for contacts.html {% endcomment %}
<script type="text/javascript" src="{% static 'info/js/for_recrs.js' %}"></script>
<link href="{% static 'info/css/for_recrs.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}
Actually if you are declaring JS file in head, it will read it at that time itself without going through the HTML file. So, it reads null value of classes and ID.
To avoid that you can declare script file just beforeend of body.
OR
Use
window.onload = function() {
// do your stuff here.
}
It solved mine problem.
Sorry I couldn't come with a more precise topic title and I must admit I'm still pretty new Django.
I am trying to work with Ajax and templates with splitted views but I can't achieve what I want, one way or another.
My goal is to be able to work with rendered templates and jquery hide/show instructions but I'm failing at some point.
Here is my urls.py:
from django.urls import path
from django.conf.urls import url
from . import views, inventory
urlpatterns = [
path('', views.index, name='index'),
url(r'^inventory', inventory.inventory, name='inventory'),
url(r'^buildInventory', inventory.buildInventory, name='buildInventory'),
]
My views index renders a templated "index.html" (there is a context that I removed for the illustration):
def index(request):
return render(request, 'myapp/index.html', context)
My index.html file :
{% extends "base.html" %}
{% load static %}
{% block delivery_form %}
<div id="mainblock">
....
</div>
{% endblock %}
And my base.html mostly contains my statics & headers:
{% load static %}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/png" href="http://web-iec/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/nice.css' %}">
<script type="text/javascript" src="{% static 'myapp/js/jquery.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/jquery-ui.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/inventory.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/homepage.js' %}" ></script>
</head>
<body>
<div class="navBar">
<span class="navBtn" id="listDeplVer" title="Inventory">Inventory</span>
</div>
<div style="min-height: 100%;margin-bottom: -20px;">
{% block delivery_form %}
{% endblock %}
{% block inventory %}
{% endblock %}
</div>
</body>
</html>
Now what I'm trying to achieve, within my inventory.js I've got an onclick event that I'm trying to use to hide the home page content and replace it by the rendered html from my inventory.py view with associated html:
my inventory.py:
def inventory(request):
return render(request, 'myapp/inventory.html')
and my inventory.html:
{% extends "base.html" %}
{% load static %}
{% block inventory %}
<div id="inventoryblock">
// html
</div>
{% endblock %}
Finally my inventory.js is looking like:
$(document).ready(function () {
$( "#listDeplVer" ).click( function () {
$.ajax({
type: 'GET',
dataType: 'html',
url: '/myapp/inventory',
beforeSend: function(){
$("#mainblock").fadeOut();
},
success : function(output){
$("#inventoryblock").html(output);
},
});
});
So like I said I was expecting that onclick my page's content is replaced by the rendered inventory page, but this is not working.
When using the web developper tools, if I open the XHR request for the inventory in a new tab it work just fine, so I assume I'm doing something the wrong way.
Before merging everything in one single file (js, views, html & so on) I wanted to ask if there is way to have something similar to work ?
Thank you for your help
Your source page doesn't have an "inventoryblock" div. That's only in the page you're loading via Ajax. So when your success function runs, it doesn't know where to put the output.
You need to put an empty div with id "inventoryblock" in your index.html.
Also, your inventory.html probably shouldn't inherit from anything. You don't need the full HTML file with the head block etc, you just want the fragment containing the contents of inventoryblock that you can insert into the requesting page. Remove everything other than the relevant HTML itself.
I have a problem with django-smart-selects usage.
In the admin panel, django-smart-selects works correctlyn but in templates there is an error.
Uncaught ReferenceError: chainedfk is not defined
$(document).ready(function() {
chainedfk.init(chainfield, url, id, value, empty_label, auto_choose);
});
Mt urls:
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^chaining/', include('smart_selects.urls')),
url(r'^$', 'avtocry.views.index'),
url(r'^/', include('advdesk.urls')),
url(r'^createadv/', 'advdesk.views.createadv',name='createadv')
]
tamplate file
{% extends 'base.html' %}
{% block content %}
<div class="wrapper">
<form action='{% url 'createadv' %}' method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
</div>
{% endblock %}
base file contais
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
html output
template
admin
Here's how I solved this, for some reason unknown to me, a file called chainedfk.js is missing. After a little digging I found that this file exists in this path 'smart-selects/admin/js/chainedfk.js' in the library files.
So I simply added this import line my base.html file.
*I removed the tags so it can be visible.
script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"
after the js import line and it worked like a charm :)
UPDATE - MAY- 2017
Sorry, things have a bit changed as of now, my form also refused to load and yet it was loading some time back, so you have to include the tag below, right after the jquery and the tag that contains chainedfk.js
This works very well both for django 1.10.5 and Django 1.11 -(the latest version as of this writting) - Python 3.5.2
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/bindfields.js' %}"></script>
I had the same problem but without receiving any error.
it worked for me too when I included:
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
to be 100% correct you have to import file with this specific order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js </script>
<!-- Smart select -->
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
Worked for me by putting {{form.media.js}} which loads the required javascripts in the head.
so:
{% block headjavascript %}{{ form.media.js }}{% endblock %}
Which is a better practice for loading javascript
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