Django + Bootstrap + nav-tabs are wrongly displayed

Question

I'm generating template in Django. The idea is to generate and populate Bootstrap nav-tabs according to entries in items parameters. Eg. If item1 belongs to room1, room1 should be displayed in tab and item 1 displayed there. If item2 also belongs to room1 it should be put to tab room1. Same story applies to room2, etc. From Django POV seems that everything is ok, but I have troubles with rendering website.

Here, below you can find my html page generated by Django.

{% extends "main.html" %}
{% block items %}
{% if items.count > 0 %}

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

      <div class="tab-content">
      {% for roomlist in rooms %}
        {% for item in items %}
          {% if item.room_id == roomlist.id %}
        <div id="{{ roomlist.room_name }}" class="tab-pane active">{{ item.id }}</div>
          {% endif %}
        {% endfor %}
      {% endfor %}
      </div>
</div>


{% else %}
<p>No items</p>
{% endif %}
{% endblock %}

From HTML POV it also looks ok:

 <div class="tabbable">
        <ul class="nav nav-tabs">       
        <li class="active"><a href="#Kitchen" data-toggle="tab">Kitchen</a></li>
        <li><a href="#Sleep" data-toggle="tab">Sleep</a></li>
        </ul>
      <div class="tab-content">
        <div id="Kitchen" class="tab-pane active">2</div>
        <div id="Kitchen" class="tab-pane active">3</div>   
        <div id="Sleep" class="tab-pane active">4</div>
        <div id="Sleep" class="tab-pane active">6</div>
      </div>
</div>

model:

from django.db import models
from django.contrib.auth.models import User

class RoomList(models.Model):
    room_name =models.CharField(max_length=150)
    user = models.ForeignKey(User)
    size = models.DecimalField(max_digits=5, decimal_places=2)
    comment = models.TextField()

    def __unicode__(self):
        return self.room_name

class Item(models.Model):
    product = models.CharField(max_length=150)
    quantity = models.DecimalField(max_digits=8, decimal_places=3)
    price = models.DecimalField(max_digits=7, decimal_places=2)
    purchase_date = models.DateField(null=True, blank=True)
    warranty = models.DecimalField(max_digits=4, decimal_places=1)
    comment = models.TextField()
    room = models.ForeignKey(RoomList)
    user = models.ForeignKey(User)

    def __unicode__(self):
        return self.product

The problem is that, when I press refresh button, all items are located in tab "Kitchen", even those which are designed to be in "Sleep room". Later when I click "sleep room" tab, there is only one item - first (correct one, so intended to be in "sleep room"). Next when I click on "Kitchen" tab I will see first item, also correct one so intended to be in "Kitchen". Do you know why am I observing such phenomena? How to correct it?

Answer 1

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)