Hi I'm trying to test using clusterize.js with my django app, the hope is to use it to load large tables with hundreds of rows of data on my html page. I am loading this html file in a view as an httpResponse:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='icon' href="{% static 'images/icon.png' %}" type='image/x-icon' />
<link href="{% static 'clusterize/clusterize.css' %}">
<link href="{% static 'clusterize/clusterize.min.js' %}">
<!--
<link href="./clusterize.css" rel="stylesheet">
<script src="./clusterize.min.js"></script>
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="popularify">
<meta name="author" content="martinbarker">
<title>popularify</title>
</head>
<body>
<div>test</div>
<button onclick="myFunction()">Call myFunction()</button>
<div id="scrollArea" class="clusterize-scroll">
<div id="contentArea" class="clusterize-content">
<div class="clusterize-no-data">Loading data…</div>
</div>
</div>
</body>
<script>
async function myFunction() {
console.log("myFunction()")
var data = ['<div>1…</div>', '<div>2…</div>', '<div>3</div>'];
var clusterize = new Clusterize({ rows: data, scrollId: 'scrollArea',contentId: 'contentArea' });
}
</script>
My static files load fine, and there are no initial errors in console when I load the page, but when I click the button, which calls the js function, i get the error:
Uncaught (in promise) ReferenceError: Clusterize is not defined
Pointing to the line:
var clusterize = new Clusterize({ rows: data, scrollId: 'scrollArea',contentId: 'contentArea' });
If I am trying to load clusterize.js using on the source files, instead of as an npm package or anything, do I need to tell my html page that the static js file I load should be referenced when creating the new Clusterize var?