Django navigation: Extends vs. innerHTML

Question

I have one web application which has a sidebar navigation menu to choose what to see in the main content block. It's important to warn you that the amount of items of this sidebar changes dynamically. The file which holds this sidebar is called 'base.html'

Since I have one different template for each sidebar item (a.html, b.html, and so on)... Which would be the best way to load its content into the main content block?

Opt A (Extending):

File: base.html

<nav id="sidebar">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse navbar-ex2-collapse">
            <ul class="nav in" id="side-menu">
                {% for submodule in submodules %}
                    <li>
                        <p id="{{ submodule }}"><i class="fa fa-table fa-fw"></i> {{ submodule }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</nav>
<div id="page-wrapper">
    {% block content %} {% endblock %}
</div>

File: a.html

{% extends 'base.html' %}
{% load staticfiles %}
{% load i18n %}

{% block content %}
    <whatever...>

{% endblock %}

Opt B (innerHTML):

File: base.html

<nav id="sidebar">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse navbar-ex2-collapse">
            <ul class="nav in" id="side-menu">
                {% for submodule in submodules %}
                    <li>
                        <p id="{{ submodule }}"><i class="fa fa-table fa-fw"></i> {{ submodule }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</nav>
<div id="page-wrapper">
    <div id="submodule-view" class="row">
        <!-- View content will be included here --->
    </div>
</div>

<script>
    ...
    // For every sidebar button dinamically generated, 'loadActiveSubmodule'
    // function gets linked to its click event.
    var theParent = document.querySelector("#side-menu");
    theParent.addEventListener("click", loadActiveSubmodule, false);

    // The selected submodule content is displayed when its button is clicked.
    function loadActiveSubmodule(e) {
        if (e.target !== e.currentTarget) {
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
            $.ajax({
                datatype: 'json',
                data: ...,
                url: ...,
                type: 'post',
                success: function(htmlResult){
                    document.getElementById('submodule-view').innerHTML=htmlResult;
                }
            });
        }
        e.stopPropagation();
    }
</script>

and then in views.py ...

if request.is_ajax():
    ...
    url = ...
    context = ...

    return render(request, url, context)

I have coded both options and, so far, I'd rather take the second choice because it seems cleaner since i don't need to set up as many url's as sidebar items i have. This navigation also feels faster since only part of the webpage is getting reloaded.

BUT, the main issue I have found is that javascript functions which are coded inside each template file (ex: a.html) does not work with innerHTML (functions not defined) despite their code is returned by Django render method. Anyone knows why?

A possible workaround for this would be to separate javascript functions in other file and load this file as needed but it would be great (much simpler at least) to make it work straight away.

Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:13

The mentioned issue with the javascript code can be solved by simply replacing the following line(s):

document.getElementById('submodule-view').innerHTML=htmlResult;

By:

$("#submodule-view").html(htmlResult);

I found it in this related post: How to replace innerHTML of a div using jQuery?

This post might be helpful as well to understand the difference between this two lines: JQuery html() vs. innerHTML

Thanks.

Django navigation: Extends vs. innerHTML

1 Answers1