Wednesday, March 28, 2012

Posting from Tab Control does not work

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