Question

0

119

Views

Execute javascript code present inside child template after the main template is rendered

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.

base template

<!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

child template

{% 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?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T22:14:38.594Z

You need to use 2 blocks:

base

<!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>

child_template

{% 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 %}

0

119