Help with adding javascript to django templates
Today was my first attempt at adding javascript to a django template. I've tried to load the javascript in my base template, then I included a bunch of script inside another template. Part of the base.html is as follows, it is generally working because I know that my css files get loaded:
<!DOCTYPE html>
<html lang="en">
{% block head %}<head>{% load static %}
<meta charset="utf-8">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="{% static "css/normalize.css" %}">
<link rel="stylesheet" href="{% static "css/skeleton.css" %}">
<link rel="stylesheet" href="{% static "css/layout.css" %}">
<!-- JAVASCRIPT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
</head>
{% endblock %}
And here is the template that is supposed to have the javascript working:
{% extends 'classroom/base.html' %}
{% block body %}
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Choose the block</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
{{ classroom.id }}
<form action="{% url 'classroom:random' %}" method="get">
<select name="class_block">
{% for room in classroom %}
<option value={{ room.course_block }}>{{ room.get_course_block_display }}</option>
{% endfor %}
</select>
<input type="submit" value="submit" />
</form>
</div>
</div>
<div class="row">
<div class="one-third columns">
test
{% for s in students %}
<ul>
<li>{{ s.nickname }}</li>
</ul>
{% endfor %}
</div>
</div>
<div class="row">
<div class="twelve columns">
<script>
var nameArray = [
"Jimmy",
"Sonny",
"Sammy",
"Henry",
"Hank",
"Susan",
"Sebby",
"Alyssa",
"Pepper",
"Ken",
"Steve",
"Kandi",
"Wes"
];
var numberStudents = nameArray.length;
var interval;
for(n = 0; n < numberStudents; n++){
var divName = "floatName" + n;
console.log(divName);
var names = nameArray[n];
var divTag = document.createElement('div');
divTag.id = divName;
divTag.innerHTML = names;
divTag.style.position = "absolute";
divTag.style.top = 50 + n*20 + "px";
divTag.style.left = "50px";
divTag.className = "randomFloat";
document.body.appendChild(divTag);
};
var loopAllowed = false;
$( "#go" ).click(function() {
loopAllowed = true;
var max = 12;
var loop = function(){
for(i = 0; i < (numberStudents + 1); i++){
var divName = "floatName" + i;
console.log(divName);
$( "#" + divName ).animate({
left: Math.random()*500 + "px",
top: Math.random()*500 + "px"
}, 500, i == max - 1 && loopAllowed ? loop : undefined);
}
};
loop();
});
$( "#stop" ).click(function() {
loopAllowed = false;
});
</script>
</div>
</div>
</div>
{% endblock %}
The parts inside <script></script> work when its loaded into a browser on its own. Inside this template though, nothing is happening.
/r/django
https://redd.it/6z38c1
Today was my first attempt at adding javascript to a django template. I've tried to load the javascript in my base template, then I included a bunch of script inside another template. Part of the base.html is as follows, it is generally working because I know that my css files get loaded:
<!DOCTYPE html>
<html lang="en">
{% block head %}<head>{% load static %}
<meta charset="utf-8">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="{% static "css/normalize.css" %}">
<link rel="stylesheet" href="{% static "css/skeleton.css" %}">
<link rel="stylesheet" href="{% static "css/layout.css" %}">
<!-- JAVASCRIPT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
</head>
{% endblock %}
And here is the template that is supposed to have the javascript working:
{% extends 'classroom/base.html' %}
{% block body %}
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Choose the block</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
{{ classroom.id }}
<form action="{% url 'classroom:random' %}" method="get">
<select name="class_block">
{% for room in classroom %}
<option value={{ room.course_block }}>{{ room.get_course_block_display }}</option>
{% endfor %}
</select>
<input type="submit" value="submit" />
</form>
</div>
</div>
<div class="row">
<div class="one-third columns">
test
{% for s in students %}
<ul>
<li>{{ s.nickname }}</li>
</ul>
{% endfor %}
</div>
</div>
<div class="row">
<div class="twelve columns">
<script>
var nameArray = [
"Jimmy",
"Sonny",
"Sammy",
"Henry",
"Hank",
"Susan",
"Sebby",
"Alyssa",
"Pepper",
"Ken",
"Steve",
"Kandi",
"Wes"
];
var numberStudents = nameArray.length;
var interval;
for(n = 0; n < numberStudents; n++){
var divName = "floatName" + n;
console.log(divName);
var names = nameArray[n];
var divTag = document.createElement('div');
divTag.id = divName;
divTag.innerHTML = names;
divTag.style.position = "absolute";
divTag.style.top = 50 + n*20 + "px";
divTag.style.left = "50px";
divTag.className = "randomFloat";
document.body.appendChild(divTag);
};
var loopAllowed = false;
$( "#go" ).click(function() {
loopAllowed = true;
var max = 12;
var loop = function(){
for(i = 0; i < (numberStudents + 1); i++){
var divName = "floatName" + i;
console.log(divName);
$( "#" + divName ).animate({
left: Math.random()*500 + "px",
top: Math.random()*500 + "px"
}, 500, i == max - 1 && loopAllowed ? loop : undefined);
}
};
loop();
});
$( "#stop" ).click(function() {
loopAllowed = false;
});
</script>
</div>
</div>
</div>
{% endblock %}
The parts inside <script></script> work when its loaded into a browser on its own. Inside this template though, nothing is happening.
/r/django
https://redd.it/6z38c1