clusterize.js with django; static files not found

Question

clusterize.js with django; static files not found

127 views Asked by Martin At 06 November 2019 at 06:15

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 ?

Original Q&A

There are 2 answers

**Harshit verma** · Answer 1 · 2019-11-06 06:41:05

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!

**Linh Nguyen** · Answer 2 · 2019-11-06 06:42:09

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>

TechQA.

clusterize.js with django; static files not found

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in DJANGO

Related Questions in CLUSTERIZE

Popular Questions

Popular Tags

Trending Questions