I've a base template which serves as a common structure for child templates. Inside this base template, I've the jQuery library included right before the closing body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
.
.
</head>
<body>
{% block content %}
{% endblock %}
<script src="path/to/jQuery/library"></script>
</body>
</html>
Now my child template has the following code
{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>
<script type="text/javascript">
// this code is specific to this template, may not be used in another template
// but can't use jQuery here since the library hasn't loaded yet
</script>
{% endblock %}
So how would I go about running javascript code inside child template only after the base template has finished loading the jQuery library?
You need to use 2 blocks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
.
.
</head>
<body>
{% block content %}
{% endblock %}
<script src="path/to/jQuery/library"></script>
{% block scripts %}
{% endblock %}
</body>
</html>
{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
// this code can "use" jquery
</script>
{% endblock %}