Getting some error on calling jQuery function

Question

this is my html code

<div class="panel panel-default" style="margin-left:12px;margin-right:24px;">
<div id="Tabs" role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<%--<li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Dispatched Booklets</a></li>
<li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Recieved Booklets</a></li>--%>
<asp:Label ID="PageName" Text="Country Admin Dashboard" runat="server" Font-Bold="True" Font-Size="X-Large"></asp:Label><br /><br />
<li class="active"><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">MA HQ Received Booklets From IPPFARO</a></li>
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">MA HQ Dispatched Booklets To MA Branch</a></li>
<li><a href="#stockRecord" aria-controls="stockRecord" role="tab" data-toggle="tab">Stock Control</a></li>
</ul>
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane" id="personal">
<div style="height: 1100px; width: 1300px; overflow: auto; float: right">
<div class="content">
<div class="search col-sm-12 col-xs-12">
<asp:LinkButton ID="lnkBtnAssign" class="dropdown-toggle" data-toggle="modal" data-target="#countryadmin" runat="server" Text="Allocate" CssClass="btn btn-info"></asp:LinkButton>
<asp:LinkButton ID="LinkButtonreassign" class="dropdown-toggle" data-toggle="modal" data-target="#branchadminreallocate" runat="server" Text="Pull Back" CssClass="btn btn-info" Style="margin-right: 10px;"></asp:LinkButton>
</div>
<div class="container-fluid">
<asp:GridView ID="DisPatchCountryGrid" AutoGenerateColumns="False" runat="server" class="mark_printed" ClientIDMode="Static" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="ClientId" HeaderText="ClientId" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
<asp:BoundField DataField="CountryID" HeaderText="CountryID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
<asp:BoundField DataField="Batch No." HeaderText="Batch No." />
<asp:BoundField DataField="ClientName" HeaderText="Client Name" />
<asp:BoundField DataField="CountryName" HeaderText="Country Name" />
<asp:BoundField DataField="Total No Of Booklets" HeaderText="No of Booklets in Stock" />
<asp:BoundField DataField="BookletNo Range" HeaderText="Booklets Range" />
<asp:BoundField DataField="Total No Of Vouchers" HeaderText="Total No Of Vouchers" />
<asp:BoundField DataField="SerialNumber Range" HeaderText="SerialNumber Range" />
<asp:BoundField DataField="Date Recived" HeaderText="Date Received" />
<asp:BoundField DataField="Recived Status" HeaderText="Received Status" />
</Columns>
<%-- <EmptyDataTemplate>No Record Available</EmptyDataTemplate>--%>
</asp:GridView>
</div>
</div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div class="modal fade" id="countryadmin" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="background: #57C7C3; padding: 10px;">
<button type="button" class="close" data-dismiss="modal" style="background: rgba(0,0,0,.4); padding: 1px 3px;">×</button>
<h5 class="modal-title" style="font-weight: bold; color: #fff;">Allocate Booklets To MA Branch</h5>
</div>
<div class="modal-body" style="text-align: center;">
<div class="div1"></div>
<asp:UpdatePanel ID="updatepanelpopup" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Client Name">Client Name</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlclient" runat="server" OnSelectedIndexChanged="ddlclient_SelectedIndexChanged" AutoPostBack="true" DataValueField="ClientID" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlclient" ErrorMessage="*select Client" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Country Name">Country Name</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlcountry" runat="server" OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged" AutoPostBack="true" DataValueField="CountryID" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ddlcountry" ErrorMessage="*select country" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Branch Name">Branch Name</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlbranch" runat="server" OnSelectedIndexChanged="ddlbranch_SelectedIndexChanged" AutoPostBack="true" DataValueField="ClientCountryBranchId" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ddlbranch" ErrorMessage="*select branch" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Dispatch Booklets From">Dispatch Booklets From</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlfrm" runat="server" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Dispatch Booklets To">Dispatch Booklets To</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlto" runat="server" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal-footer" style="text-align: center;">
<asp:Button ID="Button2" CssClass="button" Style="background: #57C7C3; color: #fff; border: 0;" runat="server" Text="Allocate" CausesValidation="false" OnClick="btndispatch_Click" />
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" Style="background: #4d4d4d; color: #fff; border: 0;" CausesValidation="false" />
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="branchadminreallocate" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="background: #57C7C3; padding: 10px;">
<button type="button" class="close" data-dismiss="modal" style="background: rgba(0,0,0,.4); padding: 1px 3px;">×</button>
<h5 class="modal-title" style="font-weight: bold; color: #fff;">Allocate Booklets To Volunteers</h5>
</div>
<div class="modal-body" style="text-align: center;">
<div class="div1"></div>
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Client Name">Client Name</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlclientreassin" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlclientreassin_SelectedIndexChanged" DateValueField="ClientID" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="*select client" ForeColor="Red" ControlToValidate="ddlclient"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Country Name">Country Name</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlcountryreassign" runat="server" OnSelectedIndexChanged="ddlcountryreassign_SelectedIndexChanged" AutoPostBack="true" DataValueField="CountryID" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="ddlcountry" ErrorMessage="*select country" ForeColor="Red"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Volunteer Name">Batch Number</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlbatch" runat="server" AutoPostBack="true" DataValueField="BatchNo" AppendDataBoundItems="true" Style="width: 170px; height: 24px;" OnSelectedIndexChanged="ddlbatch_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Dispatch Booklets From">Dispatch Booklets From</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlbookletsreassignfrom" runat="server" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: left;">
<div class="form-group row">
<label class="control-label col-md-4" for="Dispatch Booklets To">Dispatch Booklets To</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlbookletsreassignto" runat="server" AppendDataBoundItems="true" Style="width: 170px; height: 24px;"></asp:DropDownList>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal-footer" style="text-align: center;">
<asp:Button ID="btnreassign" CssClass="button" Style="background: #57C7C3; color: #fff; border: 0;" runat="server" Text="Allocate" OnClick="btnreassign_Click" CausesValidation="false" />
<asp:Button ID="btncancelreassign" runat="server" Text="Close" CssClass="button" Style="background: #4d4d4d; color: #fff; border: 0;" CausesValidation="false" />
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active" id="employment">
<div style="height: 1100px; width: 1300px; overflow: auto; float: right">
<div class="content">
<div class="search col-sm-8 col-xs-9">
</div>
<div class="container-fluid">
<asp:GridView ID="ReciveCountryGrid" AutoGenerateColumns="False" runat="server" class="mark_printed" ClientIDMode="Static" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="ClientId" HeaderText="ClientId" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
<asp:BoundField DataField="CountryID" HeaderText="CountryID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" />
<asp:BoundField DataField="Batch No." HeaderText="Batch No." />
<asp:BoundField DataField="ClientName" HeaderText="Client Name" />
<asp:BoundField DataField="CountryName" HeaderText="Country Name" />
<asp:BoundField DataField="Total No Of Booklets" HeaderText="No of Booklets Received" />
<asp:BoundField DataField="BookletNo Range" HeaderText="Booklets Range" />
<asp:BoundField DataField="Total No Of Vouchers" HeaderText="Total No Of Vouchers" />
<asp:BoundField DataField="SerialNumber Range" HeaderText="SerialNumber Range" />
<asp:BoundField DataField="Date Recived" HeaderText="Date Received" />
<asp:BoundField DataField="Recived Status" HeaderText="Received Status" />
<asp:TemplateField>
<HeaderTemplate>Action</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="Acknowledge" runat="server" Text="Acknowledge" CssClass="btn btn-primary" OnClick="Acknowledge_Click" CausesValidation="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<%-- <EmptyDataTemplate>No Record available</EmptyDataTemplate>--%>
</asp:GridView>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="stockRecord">
<div style="height: 1100px; width: 1310px; overflow: auto; float: right">
<div class="content">
<div class="search col-sm-12 col-xs-12">
<div class="row" style="color:red; font-size:medium;">
<div class="col-sm-2 col-md-4"> Select Country :</div>
<div class="col-sm-2 col-md-4"> Select Branch :</div>
<div class="col-sm-2 col-md-4"> Stock Status :</div>
</div>
<div class="row" style="color:red; font-size:medium;">
<div class="col-md-4"> <asp:DropDownList ID="ddlCon" runat="server" OnSelectedIndexChanged="ddlcon_SelectedIndexChanged" AutoPostBack="true" AppendDataBoundItems="true" ClientIDMode="Static" DataTextField="Select Country"></asp:DropDownList> </div>
<div class="col-md-4"> <asp:DropDownList ID="ddlBrn" runat="server" OnSelectedIndexChanged="ddlbrn_SelectedIndexChanged" AutoPostBack="false" AppendDataBoundItems="true" ClientIDMode="Static" DataTextField="Select Branch"></asp:DropDownList> </div>
<div class="col-md-3"> <asp:DropDownList ID="ddlstatus" runat="server" ClientIDMode="Static">
<asp:ListItem Value="-1">In & Out</asp:ListItem>
<asp:ListItem Value="0">In</asp:ListItem>
<asp:ListItem Value="1">Out</asp:ListItem>
</asp:DropDownList> </div>
<div class="col-md-1"> <button class="btn btn-danger" id="btnsearch" onclick="FilterData" runat="server">Search</button> </div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<asp:Label ID="lblBranchName" Text="Branch :" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>
<asp:TextBox ID="txtBranchName" ReadOnly="true" Text="All" runat="server"></asp:TextBox>
</div>
<div class="col-md-3">
<asp:Label ID="Label1" Text="Stock In :" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>
<asp:TextBox ID="txtstockin" ReadOnly="true" Text="00" runat="server"></asp:TextBox>
</div>
<div class="col-md-3">
<asp:Label ID="Label3" Text="Stock OUT :" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>
<asp:TextBox ID="txtstockout" ReadOnly="true" Text="00" runat="server"></asp:TextBox>
</div>
<div class="col-md-3">
<asp:Label ID="Label2" Text="Balance :" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>
<asp:TextBox ID="txtbalance" ReadOnly="true" Text="00" runat="server"></asp:TextBox>
</div>
</div><br />
<!-- Dispatched grid -->
<div class="container-fluid">
<asp:GridView ID="CountryStockControlGridView" Width="1310px" CellPadding="4" AutoGenerateColumns="False" runat="server" class="mark_printed" ClientIDMode="Static" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="BatchNo" HeaderText="Batch No." />
<asp:BoundField DataField="ClientCountryBranchName" HeaderText="Branch Name" />
<asp:BoundField DataField="StockStatus" HeaderText="Received Status" />
<asp:BoundField DataField="NoOfBooklets" HeaderText="No of Booklets " />
<asp:BoundField DataField="TotalVouchers" HeaderText="Total No Of Vouchers" />
<asp:BoundField DataField="SerialRange" HeaderText="Serial Number Range" />
<asp:BoundField DataField="CreateDate" HeaderText="Date Received" />
</Columns>
<%-- <EmptyDataTemplate>No Record Available</EmptyDataTemplate>--%>
</asp:GridView>
</div>
<asp:HiddenField ID="TabName" runat="server" />
</div>
</div>
</div>
</div>
</div>
</div>

my script

<script type="text/javascript">
// var jquery = jQuery.noConflict();
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "employment";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>

and error is

 

Uncaught TypeError: $(...).tab is not a function

at HTMLDocument.<anonymous> (CountryAdmin.aspx:1409)

at fire (jquery-1.7.1.js:1046)

at Object.fireWith (jquery-1.7.1.js:1164)

at Function.ready (jquery-1.7.1.js:435)

at HTMLDocument.DOMContentLoaded (jquery-1.7.1.js:923)

 

i did not understand why i get this error