I have a bootstrap modal. The modal has tab view in it. Each tab is then rendering a partial view for it's content.
Partial views is having few url's in them.
The issue I am having is, when I define tab 1 before tab 2, url's in tab 2 content does not work.
When I define tab 2 before 1, url's in tab 1 does not work.
Below is how I am defining my tabs inside the modal body:
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">Tab 1</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">Tab 2</a>
</li>
</ul>
</div>
<div class="panel-body>
<div class="tab-content">
<div class="tab-pane fade" id="tab2">
@Html.Partial("Tab 2")
</div>
<div class="tab-pane fade in active" id="tab1">
@Html.Partial("Tab 1")
</div>
</div>
</div>
</div>
Notice the code below from the above code that is causing the issue:
<div class="tab-content">
<div class="tab-pane fade" id="tab2">
@Html.Partial("Tab 2")
</div>
<div class="tab-pane fade in active" id="tab1">
@Html.Partial("Tab 1")
</div>
</div>
In this code tab 2 is rendering the content from 'Tab 2' partial before 'Tab 1'. So, url's in Tab 2 are working perfectly fine.
But if I'll change the order of how the content is rendering. Like, if I'll have Tab 1, rendering the content before Tab 2. Then, url's is in Tab 1 is working fine, but url's in Tab 2 doesn't work now.
I am not able to understand, why the order is affecting Tabs content to not render properly.
Is there a way I can separate tabs from affecting each other. Because both the tabs are working fine if I remove the other tab.
Please provide your suggestions!
I have been asking questions but not getting responses. I am fairly new to the coding.
Thanks for help!
