Unable to get TabPanel demo to work with 40412 Release : The Official Microsoft ASP.NET Forums

Reply

blackbart

Member

26 Points

Unable to get TabPanel demo to work with 40412 Release

Apr 28, 2010 10:14 PM|LINK

Hi, I am trying to use the TabContainer/TabPanel with the latest version of the Ajax Library. I got the demo code from http://www.asp.net/ajaxlibrary/Tabs-Control.ashx and the client side example works great. However when I switch the links to use the 40412 release the Javascript blows up and the tabs don't work. Does anyone know how to correct this and if there is an updated demo anywhere?

Below is my modifed code:

<!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>Untitled Page</title>
    <style type="text/css">
    </style>
    <link rel="Stylesheet" href="http://ajax.microsoft.com/ajax/act/40412/extended/tabs/tabs.css" />
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/act/40412/Start.debug.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/act/40412/extended/ExtendedControls.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.require(Sys.components.tabContainer, function() {
            var container = Sys.create.tabContainer("#tabcontainer", 0);
            $("#tab1_body").tabPanel(container, "#tab1");
            $("#tab2_body").tabPanel(container, "#tab2");
            $("#tab3_body").tabPanel(container, "#tab3");
        });
    </script>
</head>
<body>
    <div>
    <form id="form1" action="/">


    <div id="tabcontainer" class="ajax__tab_xp" style="width: 402px;">
        <div id="tabcontainer_header">
            <div id="tab1">Signature and Bio</div>
            <div id="tab2">Email</div>
            <div id="tab3">Controls</div>
        </div>
        <div id="tabcontainer_body" style="height: 138px;">
            <div id="tab1_body">
                <table>
                    <tr>
                        <td>
                            Signature:
                        </td>
                        <td>
                            <input name="signatureText" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Bio:
                        </td>
                        <td>
                            <input name="bioText" type="text" />
                        </td>
                    </tr>
                </table>
                <input type="submit" name="Button3" value="Save" />
                <br />
                <br />
                Hit Save to cause a postback from an update panel inside the tab panel.<br />
            </div>
            <div id="tab3_body" style="display: none;">
                Email:
                <input name="emailText" type="text" />
                <br />
                <br />
                <input type="submit" name="Button1" value="Save" />
                <br />
                <br />
                Hit Save to cause a full postback.
            </div>
            <div id="tab2_body" style="display:none;">
                <div>
                    Controls authored by Toolkit User (read-only - demo purposes):</div>
                <ul>
                    <li>Calendar</li>
                    <li>MaskedEdit</li>
                    <li>Accordion</li>
                    <li>Calendar</li>
                    <li>Calendar</li>
                </ul>
                <br />
            </div>
        </div>


    </div>


    </form>


    </div>
</body>
</html>

Edited by blackbart on Apr 29, 2010 01:47 PM

Reply

Zhi-Qiang Ni...

All-Star

33491 Points

2952 Posts

Microsoft

Re: Unable to get TabPanel demo to work with 40412 Release

May 05, 2010 11:09 AM|LINK

Hi blackbart,

The new release of start.js file removed the Sys.create method. You can use this method to create the Tab from client side:

<head id="Head1" runat="server">
    <title>Untitled Page</title>


    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>


    <%--    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>


    <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js"
        type="text/javascript"></script>--%>
    <link rel="Stylesheet" href="http://ajax.microsoft.com/ajax/act/40412/extended/tabs/tabs.css" />


    <script src="http://ajax.microsoft.com/ajax/act/40412/Start.debug.js" type="text/javascript"></script>


    <script src="http://ajax.microsoft.com/ajax/act/40412/extended/ExtendedControls.debug.js"
        type="text/javascript"></script>


    <script type="text/javascript">
        Sys.require(Sys.components.tabContainer, function() {
            /*var container = Sys.create.tabContainer("#tabcontainer", 0);
            $("#tab1_body").tabPanel(container, "#tab1");
            $("#tab2_body").tabPanel(container, "#tab2");
            $("#tab3_body").tabPanel(container, "#tab3");*/
            $("#tabcontainer").tabContainer(0, { id: "tabContainer" });
            $("#tab1_body").tabPanel($find("tabContainer"), "#tab1");
            $("#tab2_body").tabPanel($find("tabContainer"), "#tab2");
            $("#tab3_body").tabPanel($find("tabContainer"), "#tab3");
        });
    </script>


</head>

A related information:
http://forums.asp.net/p/1548462/3798342.aspx#3798342 .

Best regards,

Zhi-Qiang Ni

Microsoft Online Community Support

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.

Marked as answer by Zhi-Qiang Ni - MSFT on May 05, 2010 11:26 AM

Reply

blackbart

Member

26 Points

27 Posts

Re: Unable to get TabPanel demo to work with 40412 Release

May 05, 2010 03:45 PM|LINK

Thank you so much Zhi-Qiang, that helped out a lot.

One thing to note for anyone looking at this posting, the ID values of the div tags are case sensitive. So "tabContainer" and "tabcontainer" are not the same. Below is the final working code for the tab demo.

<!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>Untitled Page</title>
    <style type="text/css">
    </style>


	<link rel="Stylesheet" href="http://ajax.microsoft.com/ajax/act/40412/extended/tabs/tabs.css" />


    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>
	<script src="http://ajax.microsoft.com/ajax/act/40412/Start.debug.js" type="text/javascript"></script>
	<script src="http://ajax.microsoft.com/ajax/act/40412/extended/ExtendedControls.debug.js" type="text/javascript"></script>


    <script type="text/javascript">
        Sys.require(Sys.components.tabContainer, function() {
            $("#tabcontainer").tabContainer(0, { id: "tabcontainer" });
            $("#tab1_body").tabPanel($find("tabcontainer"), "#tab1");
            $("#tab2_body").tabPanel($find("tabcontainer"), "#tab2");
            $("#tab3_body").tabPanel($find("tabcontainer"), "#tab3");
        });
    </script>
</head>
<body>
    <div>
		<form id="form1" action="/">


			<div id="tabcontainer" class="ajax__tab_xp" style="width: 402px;">
				<div id="tabcontainer_header">
					<div id="tab1">Signature and Bio</div>
					<div id="tab2">Email</div>
					<div id="tab3">Controls</div>
				</div>
				<div id="tabcontainer_body" style="height: 138px;">
					<div id="tab1_body">
						<table>
							<tr>
								<td>
									Signature:
								</td>
								<td>
									<input name="signatureText" type="text" />
								</td>
							</tr>
							<tr>
								<td>
									Bio:
								</td>
								<td>
									<input name="bioText" type="text" />
								</td>
							</tr>
						</table>
						<input type="submit" name="Button3" value="Save" />
						<br />
						<br />
						Hit Save to cause a postback from an update panel inside the tab panel.<br />
					</div>
					<div id="tab3_body" style="display: none;">
						Email:
						<input name="emailText" type="text" />
						<br />
						<br />
						<input type="submit" name="Button1" value="Save" />
						<br />
						<br />
						Hit Save to cause a full postback.
					</div>
					<div id="tab2_body" style="display:none;">
						<div>
							Controls authored by Toolkit User (read-only - demo purposes):</div>
						<ul>
							<li>Calendar</li>
							<li>MaskedEdit</li>
							<li>Accordion</li>
							<li>Calendar</li>
							<li>Calendar</li>
						</ul>
						<br />
					</div>
				</div>
			</div>
		</form>
    </div>
</body>
</html>

Reply

renatoperson

Member

6 Points

4 Posts

Re: Unable to get TabPanel demo to work with 40412 Release

Aug 09, 2011 06:27 PM|LINK

This also should work:

            var container = $create(Sys.Extended.UI.TabContainer, null, null, null, Sys.get("#tabcontainer"));
            Sys.query("#tab1_body").tabPanel(container, "#tab1", { enabled: true });
            Sys.query("#tab2_body").tabPanel(container, "#tab2", { enabled: true });
            Sys.query("#tab3_body").tabPanel(container, "#tab3", { enabled: true });

Unable to get TabPanel demo to work with 40412 Release RSS

3 replies

blackbart

Unable to get TabPanel demo to work with 40412 Release

Zhi-Qiang Ni...

Re: Unable to get TabPanel demo to work with 40412 Release

blackbart

Re: Unable to get TabPanel demo to work with 40412 Release

renatoperson

Re: Unable to get TabPanel demo to work with 40412 Release

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft