Hi all,
I am new to AJAXtoolkit and I tried the following code it runs fine but does not input values in textbox nor updates the image
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script type="text/javascript">
function PanelClick(sender, e) {
}
function ActiveTabChanged(sender, e) {
__doPostBack('<%= Tabs.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<div>
<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px"
OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="ActiveTabChangedServer">
<ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One">
<ContentTemplate>
PAGE ONE - Sample HTML Content for Tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two" >
<ContentTemplate>
PAGE TWO - Sample HTML Content for Tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" HeaderText="Tab Three">
<ContentTemplate>
PAGE THREE - Sample HTML Content for Tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer> <br />
<asp:Image ID="Image1" runat="server" />
<asp:TextBox ID="txtTabSelect" runat="server" />
</div>
</form>
in the code behind I have this:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Tabs);
}
protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (Tabs.ActiveTab == Panel1)
{
Image1.ImageUrl = "~/Images/HomeEnabled.jpg";
txtTabSelect.Text = "Selected Panel 1";
}
if (Tabs.ActiveTab == Panel2)
{
Image1.ImageUrl = "~/Images/ProductsEnabled.jpg";
txtTabSelect.Text = "Selected Panel 2";
}
if (Tabs.ActiveTab == Panel3)
{
Image1.ImageUrl = "~/Images/SupportEnabled.jpg";
txtTabSelect.Text = "Selected Panel 3";
}
}
Please do tell me what am I doing wrong. I tried debugging, the watch shows that the values are present but do display.
Thanks,
do you have the autopostback property on the tabs container set to true?
Hi,
ajaxToolkit:TabContainer does not have the property and I did try adding AutoPostBack="true", compiled it and ran but it still does not work. what baffles me is it calls the
protected void ActiveTabChangedServer(object sender, EventArgs e)
{
.....
}
on the server and I can see the values in the watch window but when the page reloads, the values are not there
I have this in the page load event
if (!Page.IsPostBack)
{
ScriptManager1.RegisterAsyncPostBackControl(Tabs);
}
Thanks,
Hi,
It's caused by not calling __dopostback method in a correct way. I suggest using a hidden button to trigger postback. Here is a sample:
<%@. Page Language="C#" %><!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 Page_Load(object sender, EventArgs e) { //ScriptManager1.RegisterAsyncPostBackControl(Tabs); } protected void ActiveTabChangedServer(object sender, EventArgs e) { if (Tabs.ActiveTab == Panel1) { Image1.ImageUrl = "~/Images/HomeEnabled.jpg"; txtTabSelect.Text = "Selected Panel 1"; } if (Tabs.ActiveTab == Panel2) { Image1.ImageUrl = "~/Images/ProductsEnabled.jpg"; txtTabSelect.Text = "Selected Panel 2"; } if (Tabs.ActiveTab == Panel3) { Image1.ImageUrl = "~/Images/SupportEnabled.jpg"; txtTabSelect.Text = "Selected Panel 3"; } //Response.Write(DateTime.Now.ToString()); } </script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <script type="text/javascript"> function PanelClick(sender, e) { } function ActiveTabChanged(sender, e) { $get("<%= Button1.ClientID%>").click();// __doPostBack('<%= Tabs.ClientID%>', sender.get_activeTab().get_headerText()); } </script> <div><asp:Button runat="server" style="display:none;" Text="Button" ID="Button1"></asp:Button> <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"> <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One"> <ContentTemplate> PAGE ONE - Sample HTML Content for Tab </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two" > <ContentTemplate> PAGE TWO - Sample HTML Content for Tab </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" HeaderText="Tab Three"> <ContentTemplate> PAGE THREE - Sample HTML Content for Tab </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <br /> <asp:Image ID="Image1" runat="server" /> <asp:TextBox ID="txtTabSelect" runat="server" /> </div> </form></body></html>Hi Raymond Wen,
I tried your approach too.. but the error occurs again.
It gives me "Microsoft JScript runtime error: 'this.get_element().style' is null or not an object". I dont know what it is and why does it occur as I have not written this piece of code.
upon using a debugger it shows as this "this.get_element().style.visibility = 'visible';" which is present in the
_app_onload funtion like this:
_app_onload : function(sender, e)
{
.... this.get_element().style.visibility = 'visible';
}
Thanks for you help,
Stephen
Can you create a simple page to reproduce it?
No comments:
Post a Comment