CODEWITHSUNDEEP
djangotwitter-bootstraptabsdjango-templates
Apostolos
Apostolos

Reputation: 8121

Django and tabbed navigationin templates

I am building a django project which among others has a customer model. Any customer can be a foreign key to some calendar entry models or some picture models. I want to be able to get in to a customers page (e.g domain/customoer/1) and be able to navigate to the different models the customer is related with (e.g all the pictures for the customer, all the calendar entries of the customer). I am using bootstrap for the "presentation of the site. My idea was to use tabs. So I created a pil for my main template the customer.html

<ul class="nav nav-pills">
    <li class="active"><a href="#personal-data" data-toggle="pill">Personal Data</a></li>
    <li><a href="#history" data-toggle="pill">History</a></li>
    <li><a href="#analysis" data-toggle="pill">Analysis</a></li>
    <li><a href="#diagnosis" data-toggle="pill">Diagnosis</a></li>
    <li><a href="#treatment" data-toggle="pill">Treatment</a></li>
    <li><a href="#appointments" data-toggle="pill">Appointments</a></li>
    <li><a href="#graphics" data-toggle="pill">Graphics</a></li>
</ul>

and i was thinking of including a template for each pill

<div class="tab-content">
    <div id="personal-data" class="tab-pane active ">
    <div id="history" class="tab-pane">History is in the making</div>
    <div id="analysis" class="tab-pane">
        {% include 'customer/analysis.html' with customer=customer %}
    </div>
    <div id="diagnosis" class="tab-pane">Diagnosis is differential</div>
    <div id="treatment" class="tab-pane">Treatment what treatment??</div>
    <div id="appointments" class="tab-pane">Ap point ment</div>
    <div id="graphics" class="tab-pane">Now this is going to be hard!</div>

The templates in each tab can do different things like upload pics navigate to different pages etc.

When i hit on a pill the url (domain/customer/1/) won't change (naturally) to inform me to which tab i am at the moment. So my question is how can i know in which tab i am ath the moment? I want the user to be able to do different things from different tabs (upload pics etc) and I want to be able to redirect to the specific tab after the view is called? Maybe #id could be appended to the url to specify the tab, but it doesn't happen with bootstrap.

What is the best way to deal with tabs in django? Ajax maybe? Will I not have the same problem? Any ideas or lings would be nice too

Upvotes: 0

Views: 3813

Answers (1)

Garry Cairns
Garry Cairns

Reputation: 3125

I use template inheritance for this kind of thing. It's simple and flexible. For example, you can define your main navigation in your base template like so:

...
<li {% block news %}{% endblock %}>News</li>
<li {% block features %}{% endblock %}>Features</li>
<li {% block sport %}{% endblock %}>Sport</li>
...

Then, in your base templates for each of those apps you'd have something like:

<!-- news/base_news.html -->
{% extends 'base.html' %}
...
{% block news %}class="active"{% endblock %}
...

Upvotes: 3

Related Questions