0

I am working on Django web development project where I am trying to serve the static files by putting all the static files in the STATICFILES_DIRS directory. The static directory structure is follows:

static/css: bootstrap-theme.min.css bootstrap.min.css
daterangepicker.css font-awesome.min.css
jquery.dataTables.min.css

static/images: sort_asc.png sort_asc_disabled.png
sort_both.png sort_desc.png sort_desc_disabled.png

static/js: Chart.min.js daterangepicker.min.js
jquery.min.js moment.min.js bootstrap.min.js
jquery.dataTables.min.js jsapi
popper.min.js

static/webfonts: fa-brands-400.eot fa-brands-400.ttf
fa-brands-400.woff2 fa-regular-400.svg fa-regular-400.woff
fa-solid-900.eot fa-solid-900.ttf fa-solid-900.woff2 fa-brands-400.svg fa-brands-400.woff fa-regular-400.eot
fa-regular-400.ttf fa-regular-400.woff2 fa-solid-900.svg
fa-solid-900.woff

settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/'),
]

urls.py

urlpatterns += staticfiles_urlpatterns()

Including static files as below:

{% load static %}
<script src="{% static 'js/jsapi' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment.min.js' %}"></script>
<script src="{% static 'js/daterangepicker.min.js' %}"></script>
<script src="{% static 'js/Chart.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'application1/jquery.cookie.js' %}"></script>

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/daterangepicker.css' %}" />
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/jquery.dataTables.min.css' %}" />
<link rel="stylesheet" href="{% static 'application1/style.css' %}"/>

Getting errors: enter image description here enter image description here

The above errors are directly leading to:

[Warning] jQuery.Deferred exception: $('#table').DataTable is not a function. (In '$('#table').DataTable({"paging": true})', '$('#table').DataTable' is undefined) (2) (jquery.min.js, line 2)
"http://127.0.0.1:3000/:1771:45
j@http://127.0.0.1:3000/static/js/jquery.min.js:2:30004
http://127.0.0.1:3000/static/js/jquery.min.js:2:30314"
undefined
[Error] TypeError: $('#table').DataTable is not a function. (In '$('#table').DataTable({"paging": true})', '$('#table').DataTable' is undefined)
    (anonymous function) (jquery.min.js:2:31697)

These errors are not always reproducible and sometimes everything works fine so the problem should not be with the static file path and serving mechanism. Please help me understand as to what could be going wrong here?

EDIT: Some clarification: The errors listed above do not reoccur every time and some times some other libraries fail to load which leads to a different error. This seems more like a problem with loading the libraries than anything specific to a library.

Satya Prakash
  • 35
  • 1
  • 6
  • Possible duplicate: https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function. Does that discussion answer your question? – yagus Nov 03 '21 at 07:47
  • @yagus thanks for the reply but actually that is not the problem since the sequence is correct as you see in the above list of js inclusions and there is only version of DataTables. Also, the error keeps changing since sometimes some other libraries fail to load. – Satya Prakash Nov 03 '21 at 18:34

0 Answers0