I have bootstrap navbars
and for each tab I have a separate data to bind.So on tab change event I want to find the tab index and do the respective bindings.
For that I have taken asp HiddenField
and had the OnValueChanged
event
<asp:HiddenField ID="hdnField" runat="server" OnValueChanged="hdnField_ValueChanged" />
and setting the value in the jquery
as following
<script type="text/javascript">
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeTab1 = e.target;
var activeTab = $(e.target).text(); // Get the name of active tab
var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
varTab = $("#myTab").tabs("option", "selected");
document.getElementById("<%= hdnField.ClientID %>").value = varTab; //Setting value for hiddenfield
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
But the OnValueChanged
event is not firing. How to set the index value for the hidden field
My html for navbars is
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#sectionA">Menu</a></li>
<li><a data-toggle="tab" href="#sectionB">About</a></li>
<li><a data-toggle="tab" href="#sectionC">Help</a></li>
</ul>