After successfully loading the required js files for my template, I am facing an issue where the html elements are not being targeted by the javascript. Strangely, when I include the JS directly in the html file, it works perfectly fine. Can someone explain why the html components (especially the button's disable and enable functionality) only interact with the JS when it is part of the actual html code?
Below is the html snippet with the js embedded within. Ideally, I would prefer to statically load it:
<!DOCTYPE html>
{% extends "app/base.html" %}
{% load staticfiles %}
{% block js %}
<script type="text/javascript" src="{% static 'js/grow.js' %}"></script>
{% endblock %}
{% block content %}
<body>
<div id="message" style="visibility: hidden;"></div>
<div id="tree"></div>
<a href="/register/">register</a>
<form method="POST">
{% csrf_token %}
<input type="text" id="txt" />
<input type="submit" id="grow" value="grow" style="color: grey;"/>
</form>
<script>
var GROW_PATTERN = /.+\(.+\)/;
var REQUIREMENTS = "valid entries must be of the form ";
var GROW = "X(Y)".italics();
var GROW_REQUIREMENTS = REQUIREMENTS + GROW;
var filtered_keys = function(obj, filter) {
var key, keys = [];
for (key in obj) {
if (obj.hasOwnProperty(key) && key.test(filter)) {
keys.push(key);
}
}
return keys;
}
// define p5 functions
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
$("#grow").hover(
function() {
$("#message").text(GROW_REQUIREMENTS);
$("#message").css('visibility', $("#txt").val().match(GROW_PATTERN) ? 'hidden' : 'visible');
$.prototype.css.bind($("#message"), 'visibility', 'hidden');
});
$("#grow").click(
function(e) {
console.log("attempting ajax...");
e.preventDefault();
var csrftoken = getCookie('csrftoken');
var open_parens = ($("#txt").val()).indexOf("(");
var close_parens = ($("#txt").val()).indexOf(")");
var child = $("#txt").val().slice(0, open_parens);
var parent = $("#txt").val().slice(open_parens + 1, close_parens);
$("#txt").val('');
$.ajax({
url : window.location.href,
type : "POST",
data : { csrfmiddlewaretoken : csrftoken,
child : child,
parent : parent,
mode : "grow"
},
success : function(json) {
if (json['already']){
$("#message").text(json['child'] + "(" + json['parent'] + ") already grown. Please enter something else!");
} else {
setup();
draw(json);
console.log("draw called successfully, json type is: " + typeof json);
$("#learn").css('color', json['tree?'] ? 'black' : 'grey');
if (json['tree?']){
$("#tree").text(json['tree?']);
}
}
},
error : function(xhr, errmsg, err) {
console.log(xhr.status + ": " + xhr.responseText);
}
});
});
$("#txt").on('input', function() {
$("#grow").css('color', $("#txt").val().match(GROW_PATTERN) ? 'black' : 'grey');
});
</script>
</body>
{% endblock %}