Link to home
Start Free TrialLog in
Avatar of ryapos
ryaposFlag for United States of America

asked on

AJAX tabcontainer and html

I am new to AJAX and have a question. I have put in code I have been testing with. Can you utilize html to structure your pages with tabcontainers? This is what I have. I have a current asp.net website that I want to add tabs to the existing page. I want to add them about a 1/3 of the way down on the page which would mean I am placing it in existing html. When I do this nothing I place in between the tabpanel and contenttemplate show up in the tabs.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
   <table><tr><td>
            
        
        <cc1:TabContainer ID="TabContainer1" runat="server">
        <table>
        <cc1:TabPanel HeaderText="1" ID="Tab1" runat="server">
        <ContentTemplate><td align="center" valign="top" colspan="3"><h4>
                                                        Job Detail</h4></td>
													</tr>
													<tr>
														<td align="left">Phase:&nbsp;&nbsp;<asp:dropdownlist id="ddPhase" runat="server" cssclass="main"><asp:ListItem>Select from below..</asp:ListItem>
<asp:ListItem>Water - Drying</asp:ListItem>
<asp:ListItem>Water - Demo</asp:ListItem>
<asp:ListItem>Fire - Structural Clng</asp:ListItem>
<asp:ListItem>Fire - Packout</asp:ListItem>
<asp:ListItem>Fire - Demo</asp:ListItem>
<asp:ListItem>Needs Scoped</asp:ListItem>
<asp:ListItem>Scoped - Needs Estimate</asp:ListItem>
<asp:ListItem>Estimating</asp:ListItem>
<asp:ListItem>HOLD - Evaluation</asp:ListItem>
<asp:ListItem>HOLD - Adjuster Approval</asp:ListItem>
<asp:ListItem>HOLD - Cust. Approval</asp:ListItem>
<asp:ListItem>HOLD - PIA/Docs</asp:ListItem>
<asp:ListItem>HOLD - Cust. Selections</asp:ListItem>
<asp:ListItem>HOLD - Cust. CO</asp:ListItem>
<asp:ListItem>HOLD - Intitial Draw Req.</asp:ListItem>
<asp:ListItem>HOLD - Draw Required</asp:ListItem>
<asp:ListItem>HOLD - Permits</asp:ListItem>
<asp:ListItem>HOLD - Inspection</asp:ListItem>
<asp:ListItem>Mobilization/Pre-Const</asp:ListItem>
<asp:ListItem>CS - Demo</asp:ListItem>
<asp:ListItem>Framing</asp:ListItem>
<asp:ListItem>Ext Trim</asp:ListItem>
<asp:ListItem>Roofing</asp:ListItem>
<asp:ListItem>Mechanicals</asp:ListItem>
<asp:ListItem>Insulation</asp:ListItem>
<asp:ListItem>Drywall</asp:ListItem>
<asp:ListItem>50% Complettion</asp:ListItem>
<asp:ListItem>Interior Trim</asp:ListItem>
<asp:ListItem>Cabinets</asp:ListItem>
<asp:ListItem>Paint</asp:ListItem>
<asp:ListItem>Flooring</asp:ListItem>
<asp:ListItem>Finish Plumbing</asp:ListItem>
<asp:ListItem>Finish Electrical</asp:ListItem>
<asp:ListItem>Finish Hardware</asp:ListItem>
<asp:ListItem>80% Completion</asp:ListItem>
<asp:ListItem>Final Walkthrough</asp:ListItem>
<asp:ListItem>Punch List</asp:ListItem>
<asp:ListItem>Supplements</asp:ListItem>
<asp:ListItem>Final Billings</asp:ListItem>
<asp:ListItem>Collect</asp:ListItem>
</asp:dropdownlist></td>
														<td colspan="2"></td>														
													</tr></ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel HeaderText="2" ID="Tab2" runat="server">
        <ContentTemplate>Testing Testing</ContentTemplate>
        </cc1:TabPanel>
        </table>
        </cc1:TabContainer>
       
    </td></tr></table>
    </div>
    </form>
</body>
</html>

Open in new window

Avatar of aibusinesssolutions
aibusinesssolutions
Flag of United States of America image
You have an open <table> before the first tab panel with no <td> defined.
Avatar of ryapos
ryapos
Flag of United States of America image

ASKER

I thought that was the case too. I have tried it that way as well with the same results.
ASKER CERTIFIED SOLUTION
Avatar of aibusinesssolutions
aibusinesssolutions
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ryapos
ryapos
Flag of United States of America image

ASKER

That worked. Thanks. Can you tell me where I am going wrong then on this code?
<tr>
												<td colspan="3">
												<table>
												
                                                    <cc1:TabContainer ID="TabContainer1" runat="server">
                                                    <cc1:TabPanel HeaderText="test" runat="server" ID="TabPanel2">                                                                   <ContentTemplate>
                                                   
                                                      <tr>
                                                        <td colspan="3" align="center"> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100">
                                                            <ProgressTemplate>
                                                                <img src="img/25-1.gif" />&nbsp; <b>Saving....</b></ProgressTemplate>
                                                            </asp:UpdateProgress></td>
                                                    </tr>
                                                  
                                                    <tr>
                                                        <td colspan="3">
                                                        
                                                         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
                                                    <ContentTemplate> 
                                                    <table>                                  
                                                   
                                                       
													<tr>
													<td align="center" valign="top" colspan="3"><h4>
                                                        Job Detail</h4></td>
													</tr>
													<tr>
														<td align="left">Phase:&nbsp;&nbsp;<asp:dropdownlist id="ddPhase" runat="server" cssclass="main"><asp:ListItem>Select from below..</asp:ListItem>
<asp:ListItem>Water - Drying</asp:ListItem>
<asp:ListItem>Water - Demo</asp:ListItem>
<asp:ListItem>Fire - Structural Clng</asp:ListItem>
<asp:ListItem>Fire - Packout</asp:ListItem>
<asp:ListItem>Fire - Demo</asp:ListItem>
<asp:ListItem>Needs Scoped</asp:ListItem>
<asp:ListItem>Scoped - Needs Estimate</asp:ListItem>
<asp:ListItem>Estimating</asp:ListItem>
<asp:ListItem>HOLD - Evaluation</asp:ListItem>
<asp:ListItem>HOLD - Adjuster Approval</asp:ListItem>
<asp:ListItem>HOLD - Cust. Approval</asp:ListItem>
<asp:ListItem>HOLD - PIA/Docs</asp:ListItem>
<asp:ListItem>HOLD - Cust. Selections</asp:ListItem>
<asp:ListItem>HOLD - Cust. CO</asp:ListItem>
<asp:ListItem>HOLD - Intitial Draw Req.</asp:ListItem>
<asp:ListItem>HOLD - Draw Required</asp:ListItem>
<asp:ListItem>HOLD - Permits</asp:ListItem>
<asp:ListItem>HOLD - Inspection</asp:ListItem>
<asp:ListItem>Mobilization/Pre-Const</asp:ListItem>
<asp:ListItem>CS - Demo</asp:ListItem>
<asp:ListItem>Framing</asp:ListItem>
<asp:ListItem>Ext Trim</asp:ListItem>
<asp:ListItem>Roofing</asp:ListItem>
<asp:ListItem>Mechanicals</asp:ListItem>
<asp:ListItem>Insulation</asp:ListItem>
<asp:ListItem>Drywall</asp:ListItem>
<asp:ListItem>50% Complettion</asp:ListItem>
<asp:ListItem>Interior Trim</asp:ListItem>
<asp:ListItem>Cabinets</asp:ListItem>
<asp:ListItem>Paint</asp:ListItem>
<asp:ListItem>Flooring</asp:ListItem>
<asp:ListItem>Finish Plumbing</asp:ListItem>
<asp:ListItem>Finish Electrical</asp:ListItem>
<asp:ListItem>Finish Hardware</asp:ListItem>
<asp:ListItem>80% Completion</asp:ListItem>
<asp:ListItem>Final Walkthrough</asp:ListItem>
<asp:ListItem>Punch List</asp:ListItem>
<asp:ListItem>Supplements</asp:ListItem>
<asp:ListItem>Final Billings</asp:ListItem>
<asp:ListItem>Collect</asp:ListItem>
</asp:dropdownlist></td>
														<td colspan="2"></td>														
													</tr>
													<tr class="mainm">														
			    										<td width="390" valign="top" height="100%">
															<table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000" width="100%" height="100%">
																<tr>
																	<td align="center" valign="top">
																		<table cellspacing="0" cellpadding="5" border="0" width="100%">															
																			<tr bgcolor="#29447b" class="mainw">
																				<td colspan="2" align="center" >Dates</td>
																			</tr>
																			<tr>
																				<td width="30%" align="right">Date of Loss:</td>
																				<td>
                                                                        <asp:textbox id="txtDOL" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender9" runat="server" TargetControlID="txtDOL" PopupButtonID="imgDate" PopupPosition="BottomLeft"></cc1:CalendarExtender>
                                                                    			</td>
																			</tr>
																			<tr>
																				<td width="30%" align="right">Date Contacted:</td>
																				<td>
                                                                        <asp:textbox id="txtDC" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate1" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDC" PopupButtonID="imgDate1" PopupPosition="BottomLeft"></cc1:CalendarExtender>&nbsp;&nbsp;<asp:dropdownlist id="ddHourc" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
</asp:dropdownlist>
                                                                        <asp:dropdownlist id="ddMinutec" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>00</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
</asp:dropdownlist>
 
 <asp:dropdownlist id="ddAM2" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
 
</asp:dropdownlist>
                                                                    			</td>
																			</tr>
																			<tr>
																				<td width="30%" align="right">Date Booked:</td>
																				<td>
                                                                        <asp:textbox id="txtDateBooked" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate2" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txtDateBooked" PopupButtonID="imgDate2" PopupPosition="BottomLeft"></cc1:CalendarExtender>
                                                                    			</td>
																			</tr>
																			<tr>
																				<td align="right">Date Inspection:</td>
																				<td>
                                                                        <asp:textbox id="txtDateScheduled" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate3" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender3" runat="server" TargetControlID="txtDateScheduled" PopupButtonID="imgDate3" PopupPosition="BottomLeft"></cc1:CalendarExtender>&nbsp;&nbsp;<asp:dropdownlist id="ddHouri" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
</asp:dropdownlist>
                                                                        <asp:dropdownlist id="ddMinutei" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>00</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
</asp:dropdownlist>
 
 <asp:dropdownlist id="ddAM" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
 
</asp:dropdownlist>
                                                                    			</td>
																			</tr>
																			<tr>
																				<td align="right">Time Scheduled:</td>
																				<td>
       <asp:dropdownlist id="ddHour" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
</asp:dropdownlist>
                                                                        <asp:dropdownlist id="ddMinute" runat="server" cssclass="mainm" BorderColor="Transparent"><asp:ListItem>00</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
</asp:dropdownlist> -&nbsp;
                                                                        <asp:dropdownlist id="ddHourEnd" runat="server" bordercolor="Transparent" cssclass="mainm"><asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
</asp:dropdownlist>
                                                                        <asp:dropdownlist id="ddMinuteEnd" runat="server" bordercolor="Transparent" cssclass="mainm"><asp:ListItem>00</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
</asp:dropdownlist>
                                                                       
                                                                    			</td>
																			</tr>
																			<tr>
																				<td width="30%" align="right">Est. Compl. Date:</td>
																				<td><asp:textbox id="txtEstComp" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate4" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender4" runat="server" TargetControlID="txtEstComp" PopupButtonID="imgDate4" PopupPosition="BottomLeft"></cc1:CalendarExtender>
                                                                       
                                                                   			 	</td>
																			</tr>
																			<tr>
																				<td width="30%" align="right">Date Completed:</td>
																				<td><asp:textbox id="txtCompleted" runat="server" bordercolor="Transparent" BorderStyle="None" cssclass="mainm" readonly="False" width="75px"></asp:textbox>&nbsp;<asp:ImageButton runat="server" ID="imgDate5" ImageUrl="img/iconCalendar.gif"></asp:ImageButton><cc1:CalendarExtender ID="CalendarExtender5" runat="server" TargetControlID="txtCompleted" PopupButtonID="imgDate5" PopupPosition="BottomLeft"></cc1:CalendarExtender>
                                                                       
                                                                   			 	</td>
																			</tr>																			
																		</table>
																	</td>
																</tr>																																
															</table>																
														</td>
														<td width="20" height="100%" valign="top"></td>
														<td width="390" valign="top" height="100%">
															<table cellspacing="0" cellpadding="0" border="1" bordercolor="#000000" width="100%" height="100%">
																<tr>
																	<td align="center" valign="top">
																		<table cellspacing="0" cellpadding="5" border="0" width="100%">															
																			<tr bgcolor="#29447b" class="mainw">
																				<td colspan="2" align="center" >Job Details</td>
																			</tr>
																			<tr>
																				<td width="40%" align="right">Claim Taken By:</td>
																				<td>                                       
                                                                                    <asp:dropdownlist id="ddTakenBy" runat="server" bordercolor="Transparent" cssclass="mainm" width="180px"></asp:dropdownlist>
                                                                                    <asp:label id="Label9" runat="server" visible="False"></asp:label>
                                                                                </td>
																			</tr>
																			<tr>
																				<td align="right">Called In By:</td>
																				<td>                                  
                                                                                    <asp:dropdownlist id="ddCalledIn" runat="server" bordercolor="Transparent" cssclass="mainm" width="179px"><asp:ListItem>Select from below..</asp:ListItem>
<asp:ListItem>Homeowner</asp:ListItem>
<asp:ListItem>Agent</asp:ListItem>
<asp:ListItem>Adjuster</asp:ListItem>
<asp:ListItem>Vendor Program</asp:ListItem>
<asp:ListItem>Mgmt Company</asp:ListItem>
<asp:ListItem>Plumber</asp:ListItem>
<asp:ListItem>Realtor</asp:ListItem>
<asp:ListItem>General Contractor</asp:ListItem>
<asp:ListItem>Neighbor</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:dropdownlist>
                                                                                </td>
																			</tr>																			
																			<tr>
																				<td align="right">
                                                                                    Cause of Loss:</td>
																				<td>     
                                                                                    <asp:dropdownlist id="ddSource" runat="server" bordercolor="Transparent" cssclass="mainm" width="180px"><asp:ListItem>Select from below...</asp:ListItem>
<asp:ListItem>Fire</asp:ListItem>
<asp:ListItem>Water</asp:ListItem>
<asp:ListItem>Fire/Water</asp:ListItem>
<asp:ListItem>Storm - Wind</asp:ListItem>
<asp:ListItem>Storm - Hail</asp:ListItem>
</asp:dropdownlist>
                                                                                    
                                                                                </td>
																			</tr>
																			<tr>
																				<td align="right">Job Type:</td>
																				<td>                                                                       
                                                                                    <asp:dropdownlist id="ddJobType" runat="server" bordercolor="Transparent" cssclass="mainm" width="180px"><asp:ListItem>Select from below..</asp:ListItem>
<asp:ListItem Value="Residential">Residential</asp:ListItem>
<asp:ListItem Value="Commercial">Commercial</asp:ListItem>
</asp:dropdownlist>
                                                                                </td>
																			</tr>
																			<tr>
																				<td align="right">Liability:</td>
																				<td>                                                                       
                                                                                    <asp:dropdownlist id="ddLiability" runat="server" bordercolor="Transparent" cssclass="mainm" width="180px"><asp:ListItem>Select from below..</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>
<asp:ListItem Value="Yes">Yes</asp:ListItem>
</asp:dropdownlist>
                                                                                </td>
																			</tr>
																			<tr>
																				<td align="right">Estimator:</td>
																				<td>                                                                       
                                                                                    <asp:dropdownlist id="ddEstimator" runat="server" bordercolor="Transparent" cssclass="mainm" width="180px"></asp:dropdownlist>
                                                                                    <asp:label id="Label10" runat="server" visible="False"></asp:label>
                                                                                </td>
																			</tr>
																			<tr>
																				<td align="right">Project Mgr:</td>
																				<td>
                                                                                    <asp:dropdownlist id="ddProject" runat="server" bordercolor="Transparent" cssclass="mainm"
                                                                                        width="180px"></asp:dropdownlist>
                                                                                    <asp:label id="Label15" runat="server" visible="False"></asp:label>
                                                                                </td>
																			</tr>
																		</table>
																	</td>
																</tr>																																
															</table>
														</td>
													</tr>													
													<tr>
														<td colspan="3">
															<table cellspacing="0" cellpadding="5" border="0" width="95%">
																 <tr>
																 	<td align="left">Directions: &nbsp;&nbsp;&nbsp;</td>
																 </tr>
																 <tr>
																 	<td align="center" style="height: 84px">
                                                                         <asp:textbox id="txtDirections" runat="server" cssclass="main" height="72px" textmode="MultiLine" width="575px" BorderColor="Transparent" BorderStyle="None"></asp:textbox>
                                                                     </td>
																 </tr>
																 <tr>
																 	<td align="left">Instructions:</td>
																</tr>
																<tr>
																	<td align="center"><asp:textbox id="txtNotes" runat="server" cssclass="main" height="72px" textmode="MultiLine" width="575px" BorderColor="Transparent" BorderStyle="None"></asp:textbox></td>
																 </tr>
															</table>
														</td>													
													</tr>
													
													<tr>
														<td colspan="3" align="center"><asp:imagebutton id="ibUpdate2" runat="server" imageurl="~/img/updatewhite.gif"></asp:imagebutton></td>
													</tr>																																 </table>							
													</ContentTemplate>	
													<Triggers><asp:AsyncPostBackTrigger ControlID="ibUpdate2" EventName="Click" /></Triggers>											
                                                    </asp:UpdatePanel>
                                                    </td>
                                                    </tr>
                                                    </table>
                                                    </td>
                                                     </tr>
                                                    </table>
                                                     </ContentTemplate>
                                                    </cc1:TabPanel>
                                                    </cc1:TabContainer>
                                                  </table>
												</td>
												</tr>

Open in new window

Avatar of aibusinesssolutions
aibusinesssolutions
Flag of United States of America image
Looks like you have an extra </ContentTemplate> at the bottom.

If you are working on this in Visual Studio, or Visual Web Developer, you can click on the tag, and it will highlight both the opening and closing tags in bold.