How to call a django url after clicking on a bootstrap tab and show results on the tab content?

Question

I have created two bootstrap tabs whose data is comming from django functions. I can easily post essential data of all tabs while the tabs are loaded but I want to load data of each tab once the tab is clicked instead of loading all data together. Bootstrap uses href or data-target to load a tab content. So, when I set django url in href attribute and activate the tab by JavaScript, the django function is invoked but bootstrap does not open the tab. It always opens the first tab.

<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
  <li role="presentation" class="active"><a href="#tab_content1" id="home-tab"  role="tab" data-toggle="tab" aria-expanded="false">Profile</a>
  </li>
  <li role="presentation" class=""><a href="{% url 'edit_Peak' %}" role="tab" id="profile-tab3"  data-toggle="tab" aria-expanded="false">Monitor</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tab_content3" name="tab_content3" aria-labelledby="profile-tab">
    {% include "setting/monitor.html" %}
  </div>
</div>

My JavaScript code is:

<script>
   $(document).ready(function(){
     switch("{{section}}"){
       case 'monitor':
            $('#myTabContent #tab_content3').tab('show');
            break;
       case 'profile':
            $('#myTab a[href="#tab_content1"]').click();
            break;
        }
      })
</script>

I have also used the below javascript to activate second tab, but it does not wok.

$("#myTab").tabs("select", 2);

I appreciate your help.

Answer 1

Bootstrap will show the tab which you marked as "active". So when returning the HTML for 2nd tab make that tab as active by adding class="active" attribute to it.

May be you need to pass that information from view in the context and add that class to appropriate tab in the template.