4

I am working on my web application using Python and Flask. I have got a navbar and some buttons on it and I would like to hide one of buttons when I am not on the index page. Is that possible? I would like the button "select brand" to be visible only on index.html page.

{% block navbar %}

<nav class="navbar navbar-expand-lg navbar-default fixed-top ">
    <div class="container">

        <div class="navbar-header">
            <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="{{ url_for('main.index') }}" title="Mobile phones and accessories">
                <img style="max-width:40px; margin-top: -9px;"
                     src="http://www.logospng.com/images/38/devfest-2016-38885.png" >
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{ url_for('main.index') }}">Home</a></li>
                {% if current_user.is_authenticated and current_user.admin %}
                <li><a href="{{ url_for('phones.new_phone') }}">Add phone</a></li>
                <li><a href="{{ url_for('phones.brand') }}">Add brand</a></li>
                {% endif %}

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select brand <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {% for brand in brands %}
                        <li class="list-group-item">
                            <a href="{{ url_for('main.index', bra=brand) }}">{{ brand }}</a>
                         {% endfor %}


                    </ul>
                </li>
            </ul>
                        <ul class="nav navbar-nav navbar-right">
                {% if current_user.is_authenticated %}
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="glyphicon glyphicon-user"> </span> {{ current_user.username }}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="{{ url_for('auth.logout') }}" >Logout</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a class="nav-link" href="{{ url_for('auth.login') }}" >Login</a></li>
                    <li><a class="nav-link" href="{{ url_for('auth.register') }}" >Register</a></li>
                {% endif %}
            </ul>
                <form class="navbar-form navbar-right" method='POST' action="{{ url_for('phones.search') }}">
                <div class="form-group">
                    <input class="search-query form-control" placeholder="Search..." aria-label="Search" type="text" name="search">
                </div>
            </form>
        </div>

    </div>
</nav>
{% endblock %}


3
  • All you have to do is put the button('s) in an if/else block similar to what your doing here "{% if current_user.is_authenticated %}" but instead base it on the page title Feb 12, 2019 at 23:06
  • I am not totally familiar with this templating syntax but basically {% if filename='index.html' %} <button><button/> {% end if %} and then you need to set the var filename somewhere in you python code. Feb 12, 2019 at 23:09
  • @KyleJoeckel when I run the application I get that error jinja2.exceptions.TemplateSyntaxError: expected token 'end of statement block', got '=' I guess it doesn't accept =
    – Menor
    Feb 12, 2019 at 23:24

2 Answers 2

6

Create a new variable within your index route and pass that variable into the render_template method of said route. The presence of this variable will determine if the <button> or link within your <nav> should be rendered or not. Since the <nav> will be shared across all other layouts, its HTML code should be put within your base layout, or the layout which all other views are inheriting from.

Something along the lines of:

index route:

@app.route("/")
def index():
    # isIndex is the variable we will use to determine 
    # whether or not to render your navigation link or button
    return render_template('index.html', isIndex=True)

base layout file:

  <div class="navbar-nav">
      {% if isIndex %}
          <a class="nav-item nav-link" href="">linkOnlyForIndexPage</a>
       {% else %}
          <a class="nav-item nav-link" href="">link1</a>
          <a class="nav-item nav-link" href="">link2</a>
       {% endif %}
  </div>

This is exactly what you're already doing with {% if current_user.is_authenticated %} for your navigation links. The reason this works is because the index route is the only route which sets this variable, within your jinja2 templates, so all other routes which render corresponding views will default to false on this conditional check: {% if isIndex %}

Hopefully that helps!

3
  • not sure what i am doing wrong but the link before {% else %} isnt displaying on the Index page, but the links after else are displaying correctly.
    – Menor
    Feb 13, 2019 at 1:35
  • 1
    Actually it works!! I had index function in my other file, all i needed to do was to pass the variable isIndex and it works. Thanks you so much for your help.
    – Menor
    Feb 13, 2019 at 1:41
  • Np glad it helped!
    – Nathan
    Feb 13, 2019 at 3:11
1

I think this will work.

Set the following on your child pages:

{% set active_page = "index" %}

Then in your base template:

{% if active_page == "index" %}
... button html here
{% endif %}
2
  • I am still getting jinja2.exceptions.TemplateSyntaxError: expected token 'end of statement block', got '=' error
    – Menor
    Feb 12, 2019 at 23:32
  • Apologies, i missed a '=' from the if statement. See updated post above.
    – br0cky
    Feb 14, 2019 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.