django render views from different apps on different bootstrap tabs

manpreet Best Answer 2 years ago

I'm building a web app based on Django. My main html view has 3 bootstrap tabs like so:

{% block base %}

    <ul class="nav nav-tabs" style="margin-bottom: 20px;">
        <li class="active"><a data-toggle="tab" href="#mktcap">MarketCapa>li>
        <li><a data-toggle="tab" href="#portfo">Portfolioa>li>
        <li><a data-toggle="tab" href="#rank">Rankinga>li>
        

    ul>

    <div class="tab-content">
        <div id="mktcap" class="tab-pane fade in active">
            {% block mktcap %}{% endblock %}
        div>
        <div id="portfo" class="tab-pane fade">
            {% block portfolio %}{% endblock %}
        div>
        <div id="rank" class="tab-pane fade">
            {% block ranking %}{% endblock %}
        div>
    div>
div>

{% endblock base %}

I'm trying to build my app as modular as possible which is why I would like for each tab to be its own Django app. The problem I'm having is switching to the second "porfolio" tab. I am unable to render the view associated with portfolio whenever I switch the tab which results on the the contents being empty. What would be the best approach to go about this? Is there any way to achieve this without using AJAX?