user2091766 user2091766 - 1 month ago 4
ASP.NET (C#) Question

Need help on how to default to tab on initial load

I have a form with 3 tabs(Customer, contract, and prime) and when I load the page I want the customer tab info to show and it doesn't. I need assistance based on the code below on how to do that. Here is the .aspx page.

<style type="text/css">
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
font-size: 17px;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
font-size: 12px;
}
</style>
<script type="text/javascript">
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}


</script>

<div class="container">
<%-- <div class="form-group">
<div class="row">
<div class="col-md-2 col-md-offset-1">
<label for="exampleRequestID">Request ID:</label>
<label for="exampleRequestID">W235454</label><br />
<label for="exampleDCNID">DCN ID:</label>
<asp:Label ID="labelDCN" runat="server" Text="Label"></asp:Label>
</div>
</div>
</div>--%>
<%-- <div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="exampleDCNID">DCN ID:</label>
<label for="exampleDCNID">23525325</label>
</div>
</div>
</div>--%>

<!--RID -->
<div class="row">
<div class="col-md-2">
<label class="no-margin">Request ID: W235454</label><br />
<label class="no-margin">DCN ID: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;S1103A1710</label>

</div>
</div>

<br /><br />
<div class="row">
<div class="col-md-3">
<h1 class="no-margin">New Service Request</h1>
</div>
<div class="col-md-2 col-md-offset-6">
<asp:LinkButton ID="LinkButton1" runat="server">Back to LOD List</asp:LinkButton>
</div>
</div>



<!--Step by Step Image-->
<div class="row stepbystepimage">
<asp:Image ID="Image1" runat="server" class="image-center" src="c:\users\travisnunnally\documents\visual studio 2010\Projects\NASALOD\NASALOD\images\Finalize.png" alt="" usemap="#Map" />
<map id="Map1" name='Map'>
<area shape='rect' coords='0,0,100,100' title='Customer Selection' href='http://pardev/LOD/default.aspx' alt="Customer Selection" />
<area shape='rect' coords='148,-2,248,98' title='Contract Information' href='http://pardev/LOD/contractinfo.aspx' alt="Contract Information" />
<area shape='rect' coords='275,-4,375,96' title='Prime Contractor' href='http://pardev/LOD/primecontractor.aspx' alt="Prime Contractor" />
<area shape='rect' coords='398,-1,498,99' title='Service Set' href='http://pardev/LOD/services.aspx' alt="Service Set"/>
<area shape='rect' coords='536,-2,636,98' title='Points Of Contact' href='http://pardev/LOD/pointsofcontact.aspx' alt="Points Of Contact" />
<area shape='rect' coords='680,-1,780,99' title='Attachments' href='http://pardev/LOD/fileupload.aspx' alt="Attachments" />
<area shape='rect' coords='811,-3,911,97' title='Finalize' href='http://pardev/LOD/finalize.aspx' alt="Finalize" />
</map>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-8 zero-padding-left col-md-offset-2">
<span class="style1">
<h2><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NASA LOD Summary</strong></h2></span>
</div>
</div>
</div>
<!--Finalize Page Content-->
<div class="finalize">
<div class="container">
<div class="row" style="margin-left: 220px;">
<!-- Sidebar -->
<!--div id="sidebar-wrapper" class="col-md-3"-->
<div class="col-sm-3">
<%-- <nav id="spy">
<ul class="sidebar-nav nav">
<li class="customerinfo">
<a href="#">Customer Selection</a>
</li>
<li class="contractinfo">
<a href="#contractinfo" data-scroll>
Contract Infomation
</a>
</li>
<li class="primecontractor" >
<a href="#primecontractor" data-scroll>
Prime Contractor
</a>
</li>
<li class="comments" >
<a href="#comments" data-scroll>
Comments
</a>
</li>
</ul>
</nav>
--%>

<nav id="spy">
<ul class="sidebar-nav nav">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Customer')">Customer</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Contract')">Contract</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Prime')">Prime</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Comments')">Comments</a></li>
</ul>
</nav>
</div>


<!-- Page content -->
<!--div id="page-content-wrapper"-->
<div class="col-sm-8" style="margin-left: 0px; width: 711px;">
<div class="row active">
<div class="col-md-12 well tabcontent " id="Customer" style="width:546px;">
<span class="style1">
<legend >Customer Selection</legend>
<div class="row">
<div class="col-md-5 spacing">Customer Source Code:</div>
<%--<div class="col-md-4""><asp:Label ID="lblCustSourceCode" runat="server" Text="Label" name="lblCustSourceCode"></asp:Label></div>--%>
<div class="col-md-4"">832 - NASA</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Customer Code:</div>
<%--<div class="col-md-4""><asp:Label ID="lblCustCode" runat="server" Text="Label" name="lblCustCode"></div>--%>
<div class="col-md-4">555</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Name:</div>
<%--<div class="col-md-4""><asp:Label ID="lblName" runat="server" Text="Label" name=""lblName"></div>--%>
<div class="col-md-4">Aeronautics Lab</div>
</div>
<div class="row">
<div class="col-md-5 spacing">City:</div>
<%--<div class="col-md-4""><asp:Label ID="lblCity" runat="server" Text="Label" name="lblCity"></div>--%>
<div class="col-md-4">Houston</div>
</div>
<div class="row">
<div class="col-md-5 spacing">State:</div>
<%--<div class="col-md-4""><asp:Label ID="lblState" runat="server" Text="Label" name="lblState"></div>--%>
<div class="col-md-4">Texas</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Zip:</div>
<%--<div class="col-md-4""><asp:Label ID="lblZip" runat="server" Text="Label" name="lblZip"></div>--%>
<div class="col-md-4">10001</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12 well hi tabcontent" style="width:546px;" id="Contract">
<legend >Contract Information</legend>
<div class="row">
<div class="col-md-5 spacing">Nasa Control Number:</div>
<div class="col-md-4">4416367</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Prime Contact Number<span style="color:red">*</span>:</div>
<div class="col-md-4">4416367</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Contract Start Date:</div>
<div class="col-md-4">10/30/2016</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Face Value of Contact<span style="color:red">*</span>:</div>
<div class="col-md-4">10/30/2016</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Contract End Item or Service:</div>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Authorize Redelegation<span style="color:red">*</span>:</div>
<div class="col-md-4">YES</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Estimated LOD Completion Date<span style="color:red">*</span>:</div>
<div class="col-md-4">10/30/2016</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Is your LOD ONLY for one specific Purchase Order or Delivery Order:</div>
<div class="col-md-4">No</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Contracting Officer:</div>
<div class="col-md-4">John G. Doe</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Date LOD Signed by Customer/Contracting Officer<span style="color:red">*</span>:</div>
<div class="col-md-4">08/11/2016</div>
</div>
</div>
</div>



<div class="row">
<div class="col-md-12 well tabcontent" style="width:546px" id="Prime">
<legend>Prime Contractor</legend>
<div class="row">
<div class="col-md-5 spacing">CAGE:</div>
<div class="col-md-4">55524</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Prime Contractor Name:</div>
<div class="col-md-4">Merrit Company</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Address 1:</div>
<div class="col-md-4">555 Marietta Street</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Address 2:</div>
<div class="col-md-4"> </div>
</div>
<div class="row">
<div class="col-md-5 spacing">City:</div>
<div class="col-md-4">Atlanta</div>
</div>
<div class="row">
<div class="col-md-5 spacing">State:</div>
<div class="col-md-4">Georgia</div>
</div>
<div class="row">
<div class="col-md-5 spacing">Zip:</div>
<div class="col-md-4">30331</div>
</div>
</div>
</div>
</div>

Answer

You could activate the tab on the Document Ready event.

$(document).ready(function () {
    openCity('Customer');
});

The only problem is that this does not sent an event so this line will give an error evt.currentTarget.className += " active";. But if you remove that the Link will not get the active class. So if you change your script to this it will work.

function openCity(cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
        if (tablinks[i].innerHTML == cityName) {
            tablinks[i].className += " active";
        }
    }
    document.getElementById(cityName).style.display = "block";
}

And change onclick="openCity(event, 'Customer')" to onclick="openCity('Customer')"