CODEWITHSUNDEEP
htmldjangodjango-templates
Ibo
Ibo

Reputation: 4299

Django: Top navigation bar refreshes (flickers) when clicking on menu items

I have developed a Django app with a fixed top navbar, but it sometimes flickers / refreshes when clicking the menu items. Have I made a mistake in extending the templates or it is something else causing this?

Here is the app deployed that you can see it: http://azeribocorp.pythonanywhere.com/index/

__base.html:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>
        {% block stylesheets %}         {% endblock stylesheets %}  
        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB" >
            {% include 'aztracker/_topnavbar.html' %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}
    </body>
</html>

search_form.html:

{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}

{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <section class="search_section">
            <form  method="POST" action="/search/">         
                {% csrf_token %}
                <input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
                <button id="search_btn" class="flat_button">Search</button>
            </form>
        </section>

        <!-- view all country codes link -->
        <div class="wrapper">
            <a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
        </div>
    {% endblock main_col %} 
{% endblock content %}

_topnavbar.html:

{% load static %}
{% load staticfiles %}


{% block stylesheets %} 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
{% endblock %}


<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
    <ul class="nav-items">
        <li class="{% if request.resolver_match.url_name == 'index' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'index' %} class='nav-link'><span>Home</span></a>
        </li>
        <!--<li class="nav-item">
            <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
        </li>-->
        <li class="{% if 'track_containers' in  request.resolver_match.url_name  %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
        </li>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                </ul>
            </nav>
        </li> 
        <li class="{% if request.resolver_match.url_name == 'search' %}
                nav-item active
            {% else %}
                nav-item 
            {% endif %}"> 
            <a href={% url 'search' %} class='nav-link'><span>Search</span></a>
        </li>
        <li class="{% if request.resolver_match.url_name == 'report' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'report' %} class='nav-link'><span>Report</span></a>
        </li>

        <li class="nav-item dropdown">
            <a href="#" class="nav-link" id="dd-more"><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> 

        <!--
        <li class="{% if 'more' in request.resolver_match.url_name  %}
                nav-item dropdown active
            {% else %}
                nav-item dropdown
            {% endif %}"> 
            <a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> -->
    </ul>
</nav>

{% block js %}
    <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock js %}

__base.html [edit 1]:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}
    </body>
</html>

search_form.html [edit 1]:

{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}

{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <section class="search_section">
            <form  method="POST" action="/search/">         
                {% csrf_token %}
                <input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
                <button id="search_btn" class="flat_button">Search</button>
            </form>
        </section>

        <!-- view all country codes link -->
        <div class="wrapper">
            <a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
        </div>
    {% endblock main_col %} 
{% endblock content %}

_topnavbar.html [edit 1]:

{% load static %}
{% load staticfiles %}

{% block topnavbar %}
    <!--Top Navigation-->
    <nav role="navigation" class="nav" id="topnav">
        <ul class="nav-items">
            <li class="{% if request.resolver_match.url_name == 'index' %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'index' %} class='nav-link'><span>Home</span></a>
            </li>
            <!--<li class="nav-item">
                <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
            </li>-->
            <li class="{% if 'track_containers' in  request.resolver_match.url_name  %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
            </li>
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                    </ul>
                </nav>
            </li> 
            <li class="{% if request.resolver_match.url_name == 'search' %}
                    nav-item active
                {% else %}
                    nav-item 
                {% endif %}"> 
                <a href={% url 'search' %} class='nav-link'><span>Search</span></a>
            </li>
            <li class="{% if request.resolver_match.url_name == 'report' %}
                    nav-item active
                {% else %}
                    nav-item
                {% endif %}"> 
                <a href={% url 'report' %} class='nav-link'><span>Report</span></a>
            </li>

            <li class="nav-item dropdown">
                <a href="#" class="nav-link" id="dd-more"><span>More</span></a>
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
                        <li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
                        <li class="submenu-item"><hr class="submenu-seperator" /></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                        <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                    </ul>
                </nav>
            </li> 

            <!--
            <li class="{% if 'more' in request.resolver_match.url_name  %}
                    nav-item dropdown active
                {% else %}
                    nav-item dropdown
                {% endif %}"> 
                <a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
                <nav class="submenu">
                    <ul class="submenu-items">
                        <li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
                        <li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
                        <li class="submenu-item"><hr class="submenu-seperator" /></li>
                        <li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
                        <li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
                    </ul>
                </nav>
            </li> -->
        </ul>
    </nav>
{% endblock topnavbar %}



{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}

        {% block extra-js %}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        {% endblock extra-js %} 

    </body>
</html>

__base.html [edit 2]:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}
        <title>
            {% block title %}Azeribo Tracking{% endblock title %} 
        </title>

        <!-- styles and js required for topnavbar -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        {% block stylesheets %}     {% endblock stylesheets %}  

        {% block js %}                  {% endblock js %}               
    </head>

    <body>
        <header class="topnavbar" id="TNB">
            {% block topnavbar %}
                {% include 'aztracker/_topnavbar.html' %}
            {% endblock topnavbar %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block content %}
                {% endblock content %}
            </div>
        </div> {# /#main #}

        {% block extra-js %}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        {% endblock extra-js %} 

    </body>
</html>

Upvotes: 0

Views: 870

Answers (1)

Alexander Tyapkov
Alexander Tyapkov

Reputation: 5017

If you will use WebDeveloperTools/Inspector or similar tools then you will notice that rewrite of stylesheets block in _tophavbar.html doesn't work. Js and css are included inside of body.

It happens because you are including _topnavbar.html into _base.html (without extension). It means that _topnavbar.html doesn't now anything about stylesheets block in _base.html template.

You can move menu js and css to the top template. Second solution is to implement different template inheritance __base.html -> __base_with_menu.html -> search_form.html

P.S. Also you have defined js block, so probably you want to include js files inside of it and not in stylesheets.

Upvotes: 1

Related Questions