'Bootstrap tabs doesn't work with Django include option

I am working with bootstrap tabs in Django on page ps_tabs_capacity.html which extends the base.html . Inside ps_tabs_capacity.html there is tab I include another ps_capacity1.html which should display Charts.js charts with info from external database .

ps_tabs_capacity.html:

{% extends 'app_sins/base.html' %}

{% load static %}

{% block main%}

<body style="background-color:RGB(244,246,249)" >
    <div class="container-fluid">
       
        <br>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#menu1">GnGp</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
          </li>
        </ul>
      
        <!-- Tab panes -->
        <div class="tab-content">
          <div id="home" class="container tab-pane active"><br>
                 
           </div>
          <div id="menu1" class="container tab-pane fade"><br>
            <h3>Menu 1</h3>
            
            {% include 'app_sins/ps_capacity1.html' %}

          </div>
          <div id="menu2" class="container tab-pane fade"><br>
            <h3>Menu 2</h3>
           
          </div>
        </div>
      </div>

          </body>    

     {% endblock main%}

in views.py I use two function (there are others, but not important here) ,first one is:

def index(request):   
   
    cursor1=connections['default'].cursor()   
    cursor1.execute(attach)    
    r1=dictfetchall(cursor1)
    cursor2=connections['default'].cursor()    
    cursor2.execute(gngp_ntp)
    r2=dictfetchall(cursor2)
    
    return render(request,'app_sins/ps_capacity1.html', {"all_post" : r1,"jokso" : r2})

and second one is:

def ps_tabs_capacity(request):

    return render (request,'app_sins/ps_tabs_capacity.html', {} )

in url.py there are:

path('sins/ps_tabs', views.ps_tabs_capacity, name='ps_tabs1'),
path('sins/', views.index, name='index'),

If I use only ps_capacity1.html with extension of base.html, everything is OK( got info from database, it works OK) but in bootstrap taps when I call it, It only appears charts without data/lines on it. It looks like I need to trigger function index in order to appear under the taps.. My questions are:

  • What is needed to triger ps_capacity1.html under bootstrap taps?
  • Do I need here to pass some argument and how to the function index?
  • How my url.py and views.py should look like?

I would highly appreciate, if someone could help me with solution here. Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source