[Answered ]-Django + Bootstrap + nav-tabs are wrongly displayed

by

2👍

✅

Problems:

  • The tab-pane should be equal to the number of tab header defined in nav-tabs and then place content inside tab-pane for respective nav-tabs
  • There should be one active tab-pane

Improvements:
– You don’t need to pass items in context you can access the room items directly in template using room.items.all, just define the related_name for RoomList in Item model

So here is the improved code:

{% extends "main.html" %}
{% load item_tags %}

{% block items %}
    {% if rooms %}
    <div class="tabbable">
        <ul class="nav nav-tabs">
            {% for room in rooms %}
                <li{% if room.id == 1 %} class="active"{% endif %}><a href="#room_{{ room.id }}" data-toggle="tab">{{ room.room_name }}</a></li>
            {% endfor %}
        </ul>

        <div class="tab-content">
            {% for room in rooms %}
                <div id="room_{{ room.id }}" class="tab-pane{% if room.id == 1 %} active{% endif %}">
                    <ul class="unstyled">
                        {% filter_items room as items %}
                        {% for item in items %}
                            <li>{{ item.id }}</li>
                        {% empty %}
                            <li>Sorry! No Items</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
        <p>Sorry! No rooms available</p>
    {% endif %}
{% endblock %}

To filter items based on user you need to write a custom tag (I have updated my answer above to use this custom tag):

myapp/templatetags/item_tags.py

@register.assignment_tag(takes_context=True)
def filter_items(context, room):
    request = context['request']
    return room.items.filter(user__id=request.user.id)
👤Aamir Rind

Leave a comment