I am using an ajax accordian pane within an ajax tabpanel.
I dont want the accordian to load until the tab is clicked because it contains many images and is causing the page to load very slowly.
How can I make the accordian not load until the tab is clicked?
<ajaxToolkit:TabPanelID="TabPanel5"runat="server"HeaderText="Loft's & Condo's">
<ContentTemplate>
<tablestyle="height:400px;">
<tr>
<tdalign=center>
<uc1:Developmentsrunat="server"Visible=falseid="developments"></uc1:Developments> -------> //This contains the "Accordian"
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
u can create accrodian panel , when tab is clicked..
so it will not loading, when page is loaded.
You can use this approach...http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx.
-Damien
Thanks for the reply, I am no sure how I would go about doing that...??
tmiller3:
I am no sure how I would go about doing that...??
Have you tried following the example?
Hey,
Thanks. I tried using that example but it is not working.
Here is my code
<hr>
function findControl(parent, tagName, serverId){
var items = parent.getElementsByTagName(tagName);
// walk the items looking for the right guy
for (var i = 0; i < items.length; i++){
var ctl = items[i];if (ctl && ctl.id){
// check the end of the name.
//
var subId = ctl.id.substring(ctl.id.length - serverId.length);if (subId == serverId)
{return ctl;}
}
returnnull;}
}
function loadTabPanel(sender, e)
{
var tabContainer = sender;if (tabContainer)
{
var updateControlId ="TabButton" + tabContainer.get_activeTabIndex();// get the active tab and find our button
//
var activeTab = tabContainer.get_activeTab();
// check to see if we've already loaded
//
if (findControl(activeTab.get_element(),"div","TabContent" + tabContainer.get_activeTabIndex()))return;
var updateControl = findControl(activeTab.get_element(),"input", updateControlId);
if (updateControl){
// fire the update
//
updateControl.click();
}
}
}
<ajaxToolkit:TabContainerID="TabContainer"runat="server"ActiveTabIndex="0"OnClientActiveTabChanged="loadTabPanel">
<ajaxToolkit:TabPanelID="TabPanel5"runat="server"HeaderText="Loft's & Condo's">
<ContentTemplate>
<asp:UpdatePanelID="up1"runat="server">
<ContentTemplate>
<asp:ButtonID="TabButton1"runat="server"OnClick="TabButton_Click"style="display:none;"/>
<asp:PanelID="TabContent1"runat="server"Visible="False">
<tablestyle="height:400px;">
<tr>
<tdalign=center>
<uc1:Developmentsrunat="server"id="developments"></uc1:Developments>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
protectedvoid TabButton_Click(object sender, System.EventArgs e){
string containerID ="TabContent" + TabContainer.ActiveTabIndex;Panel panel = (Panel) TabContainer.ActiveTab.FindControl(containerID);
if (((panel !=null))){
panel.Visible =true;}
}
Hi
It works:
<%@. Page Language="C#" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Visible = true;
}
protected void TabButton_Click(object sender, EventArgs e)
{
TabContent1.Visible = true;
}
</script>
<script language="javascript" type="text/javascript">
function loadTabPanel()
{
document.getElementById("<%= TabButton1.ClientID %>").click();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<ajaxToolkit:TabContainer ID="TabContainer" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="loadTabPanel">
<ajaxToolkit:TabPanel ID="TabPanel5" runat="server" HeaderText="Loft's & Condo's">
<ContentTemplate>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="TabButton1" runat="server" OnClick="TabButton_Click" Style="display: none;" />
<asp:Panel ID="TabContent1" runat="server" Visible="false">
<table style="height: 400px;">
<tr>
<td align="center">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox1" runat="server" Visible="false">sddsf</asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
I think your javascript has some logical error,so your code doesn't work. Please dubble check it!
Best Regards!
No comments:
Post a Comment