use clusterize.js library with django - javascript

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?

Related

Why is my static CSS file working fine but not javascipt in Django?

I'm new to Django. I'm trying to add a javascript for my navbar. Browser is reading static CSS file properly. But it looks like browser is ignoring my static javascript file. Here is my code:
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Index.html
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}">
<script type='text/javascript' src="{% static 'style.js' %}"></script>
<title>{% block title %}{% endblock title %}</title>
</head>
To check whether javascript is working properly I have only put a alert box. But still it is not showing alert box.
style.js
alert("Checking");

Uncaught TypeError: $(...).sidebar is not a function but semantic.js is included in head

I'm trying to implement the sidebar function for Semantic UI but I keep getting this error where it does not recognize the function
I've checked the network tab in Chrome and sure enough, when I comment out the jquery file, the semantic js file loads and vice versa. Not sure why
Below is my header
<head>
<meta charset="utf-8">
<title>Portal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'portal/semantic.min.css' %}">
<script type="text/javascript" src="{% static 'portal/jquery-1.12.4.js' %}"</script>
<script type="text/javascript" src="{% static 'portal/semantic.js' %}"></script>
<style>
body{
font-size:1.2em;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".ui.sidebar").sidebar("show");
});
</script>
</head>
Not quite sure why this happens. Maybe it is a simple mistake on my end. The help would be appreciated
Yep, so the issue was that I didn't close the first script tag...yeesh

Access DOM from a different html file with JS

Is there a way to get the DOM elements from another HTML file rather than the elements from the HTML file that calls the JS file?
My idea is to make html templates, and render them in a main html file, depending on certain conditions imposed by the JS file.
Something like
var initScreen = new document(URL);
document.getElementById("body") = initScreen.getElementById("body");
supposing that this is the correct way.
Yep. You can fetch a remote (or local) file and then use createHTMLDocument:
document.querySelector(".the_replacer").addEventListener("click", () => {
fetch("https://cdn.rawgit.com/ryanpcmcquen/c22afdb4e6987463efebcd495a105d6d/raw/476e97277632e89a03001cb048c6cacdb727028e/other_file.html")
.then((response) => response.text())
.then((text) => {
const otherDoc = document.implementation.createHTMLDocument("Foo").documentElement;
otherDoc.innerHTML = text;
document.querySelector(".element_on_main_page").textContent = otherDoc.querySelector(".awesome_external_element").textContent;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="element_on_main_page">Replace me, please.</div>
<button class="the_replacer">Replace them.</button>
<script src="index.js"></script>
</body>
</html>
https://repl.it/#ryanpcmcquen/TurboTremendousProgramminglanguages
Here's the remote file's contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="awesome_external_element">Foobar.</div>
</body>
</html>
Browser support is not too bad. On the other hand fetch is pretty modern, so if you are going for legacy support you should use XMLHttpRequest.

vue js failed to "reactive"

i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>

Outputting controller variable in Ember.js HTMLbars template

I was following with along the Ember Guides: Defining Your Routes and added a customized index route in my Ember app; which sets a controller title property:
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller) {
// Set the IndexController's `title`
controller.set('title', 'Tagged! - home');
}
});
I then added an output for the title in app/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tagged-ember.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tagged-ember.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
However instead of the expected output I get {{title}} in the browser title bar. Why is HTMLbars not outputting the variable?
I'm using the ember-cli (ember 1.13.3) and running the server with ember server. I can see the controller property in the ember inspector.
The index.html file is outside the scope of the application controller/route/template, ember-cli-document-title solves the issue for you.
If you don't want to use it you can create an in-repo-addon that makes use of something like {{content-for 'document-title'}}.

Categories