CODEWITHSUNDEEP
djangodjango-templates
DevKing
DevKing

Reputation: 231

Django Templates Inclusion / Blocks

I have the following template structure:

base.html:

<html>
  <head>
  </head>
  <body>
    <div class="main-content">
      {% block body %}{% endblock %}
    </div>
  </body>
</html>

detail.html extending base.html:

{% extends "base.html" %}

{% block body %}
    <!-- filter side panel -->
    {% block filter_panel %}
    {% endblock %}
{% endblock %}

list.html extending base.html:

{% extends "base.html" %}

{% block body %}
    <!-- filter side panel -->
    {% block filter_panel %}
    {% endblock %}
{% endblock %}

filter.html:

{% extends "detail.html" %}
{% block filter_panel %}
  ...
  ...
{% endblock%}

Now, I have implemented a filter panel which is invoked by a button using onclick="filter_open()". The respective method is in an external JS file and basically opens a side panel:

function filter_open() {
  document.getElementById("filtersidebar").style.display = "block";
  document.getElementById("filtersidebar-outer").classList.add("fc-filters-overlay");
}

This filter, I want to make available on detail.html and list.html. So, I created a new file filter.html. Both, the detail.html and the list.html have a {% block filter %}{% endblock %} and in filter.html I add the functionality within the respective Django blocks.

The button however, now throws an error:

Uncaught TypeError: Cannot read property 'style' of null
  at filter_open (main.js:146)
  at HTMLButtonElement.onclick ((index):158)

I guess this is because I moved the filter to 'filter.html'.

Upvotes: 1

Views: 117

Answers (1)

Selcuk
Selcuk

Reputation: 59164

From what it looks what you need is to use the include tag instead of using template inheritance, i.e.:

detail.html

{% extends "base.html" %}

{% block body %}
    <!-- filter side panel -->
    {% include "filter.html" %}
{% endblock %}

Upvotes: 1

Related Questions