System.WebForms.PageRequestManagerParserErrorException The message revieved from the serve

I am trying to use update panel's feature to asyncronously postback and update the data in one of my grid. I am using Master Page and ASPX and a User Control that actually contains the button, Update Panels and a Grid.

When I click btnRefresh I get the following error:

System.WebForms.PageRequestManagerParserErrorException The message revieved from the server could not be parsed...

My ascx looks like this:

<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:ImageButtonID="btnRefresh"runat="server"ImageUrl="~/refresh.gif"OnClick="ImageButton1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanelID="UpdatePanel2"runat="server">
<Triggers>
<asp:AsyncPostBackTriggerControlID="btnRefresh"/>
</Triggers>
<ContentTemplate>
<igtbl:UltraWebGridID="UltraWebGrid1"runat="server"Height="200px"Width="468px"style="left: 1px; top: 226px">
</igtbl:UltraWebGrid>
</ContentTemplate>
</asp:UpdatePanel>

Could someone please suggest on this? Is the problem with User Controls??

Guys,

I added the script manager in my Master Page and then added scriptManagerProxy at my user controls which resolved the problem.

Cheers,

Ashish

Tab Container

I have seen the tab container inside an update panel and with out any update panels.

Which is correct?

Thank!

Dennis4j,

The only reason I put the TabContainer inside of an UpdatePanel is when I have an "editable" GridView inside one of the tabs. I can't remember where I read this, but in order for the tab control to keep track of the correct tab when the grid goes into edit mode this had to be done. I think it was logged as a bug but I don't have the details handy.

Regards.

Tab Container Issue - Inside of Update Panel

I was attempting to have a tab container hidden (visible = false) when I load the page inside of an Update Panel. After entering in some search criteria and pressing load, the tab container would become visible, or so I thought. What I got was all of the tabs' header text just written out on one line with the first tab visible and no container. Has anyone ran into this or know a work around? Outside of that, I think this would qualify as a bug or need to be noted in the documentation that you cannot change the visibility of a Tab Container inseide of an Update Panel and expect it to work correctly.

PS. Toggling the visibility of the Tab Containers works fine when the Tab Container is outside of an Update Panel.

Hi,

I fail to reproduce the issue. Can you show me your code?

Tab Container within an Update Panel

I am working on a page that contains a grid within an update panel. The user selects an item from the grid, popping up a draggable panel with the details of the item they selected.

I want to be able to have a tab control within the pop up, but am running into some issues. The backgrounds of the tab headers dont show up. It looks to me like the styles arent getting sent to the browser because the control is being added to the page through the update panel. When I move the tab control outside of the update panel, or add another one to the page that is visible on page load it looks fine.

I was about to add another tab container to the page and set the display to none but that seems like a hack. I was wondering if there is any other way to get the styles for the tab container down to the page on load without having to do something like that.

Thanks for the help in advance,
James Hollister
Ascending Integration Inc.
www.AscendingIntegration.com

The tab control should be outside that UpdatePanel or inside a new UpdatePanel to work. Makes sense?

If you, please post the code and let's figure it out.

I'm having the same issue with the TabContainer styles not being sent to the browser, did anyone find a solution for this?

The tab container itself contains ajax functionality

Most Controls that contain built in ajax functionality dont work well in an UpdatePanel because the javascript does not gets send in an update panel during partial updates

You will need to keep the tab container outside of an update panel.

This however causes the problem of the tab container state not being updated from the code behind. For example i was not able to change the active tab from code behind in a partial postback.

The turnaround for this was that i used javascript

the below code shows how exactly

first io create a javascript function to change the active tab index

function ChangeTab(indx)

{

$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(indx)

}

$find('<%=TabContainer1.ClientID%>') gets a reference to the tab container object in the javascript

then called this from code behind using the following

ScriptManager.RegisterStartupScript(Me, updButtonBar.GetType,"KEY","ChangeTab(2);",True)

here the me is the page and updbuttonbar is the update panel . It can be any update panel in the page.

In this way you can manipulate the tab container by calling any of the methods of the tab container javascript object.

If you want to find the listing of the methods save As the page containing the tab container as a complete web page on ur local hard drive

in one of the resources file u can find the methods the javascript object tab container contains or perhaps download the ajax control toolkit source

This ways was good enough for me.

Let me know if it helps

Cheers

Sohail Sayed

No this is not true - UpdatePanel does incremental loading of the scripts.

I'm not able to repro this. On the sample page, I wrap the TabContainer in an UpdatePanel and it works fine.

Can someone please post a repro?

I would do, but the situation in which this problem has arisen for me is a little bit complicated, since i'm building a custom webpart based draggy droppy affair. The TabContainer is in an UpdatePanel, which is in another UpdatePanel, and i'm creating it programatically.

I'll have a quick play, and see if i can get it to happen in a simpler scenario.

Ok, this is a much simplified reproduction of my page, but it causes the "bug". I need to add a TabContainer dynamically as the result of a button press, and in the following conditions, it appears with no styles on it.

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> </div><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></ContentTemplate></asp:UpdatePanel></ContentTemplate></asp:UpdatePanel> </form></body></html>

 
protected void Page_Load(object sender, EventArgs e) { }protected void Button1_Click(object sender, EventArgs e) { AjaxControlToolkit.TabContainer tbc =new AjaxControlToolkit.TabContainer(); AjaxControlToolkit.TabPanel tbp1 =new AjaxControlToolkit.TabPanel(); tbp1.HeaderText ="Test Panel 1"; Literal ltrl1 =new Literal(); ltrl1.Text ="Panel 1 Content"; tbp1.Controls.Add(ltrl1); tbc.Tabs.Add(tbp1); AjaxControlToolkit.TabPanel tbp2 =new AjaxControlToolkit.TabPanel(); tbp2.HeaderText ="Test Panel 2"; Literal ltrl2 =new Literal(); ltrl2.Text ="Panel 2 Content"; tbp2.Controls.Add(ltrl2); tbc.Tabs.Add(tbp2); UpdatePanel2.ContentTemplateContainer.Controls.Add(tbc); }
  

The problem that I am having along these lines is that when either the TabContainer itself or whatever container it is in (ex. Panel) is set to Visible=false; then on the partial page load the styling is not loaded. From my understanding it adds a <link> to the header when the page is loaded but this doesn't work if the control was not visible when the page was initially rendered. When the TabContainer is rendered everything is there and it works but you can't see the tab but only the HeaderText. All of the styling is lost.

Any idea of how to get around this? My thought was to add the <link> when the page is first loaded but I'm can't find anything about how to do this.

Luke

I'm having the same problem.

If I create a TabContainer dynamically (through OnInit) or initially set the TabContainer.Visible = false, the styling does not load.

Hi,

Unfortunatelly TabContainer does not properly load CSS if it first appears on the page in UpdatePanel with async update postback. However, it is quite easy to solve this, by adding an empty TabContainer somewhere to the page, but utside any UpdatePanel. Empty TabContainer without any Tabs does not render anything noticable to the page, but it loads CSS which is later used by other TabContainers.

So, add a TabContainer without pages to your page and make sure it is not in UpdatePanel and it its Visible = true.

-yuriy
http://couldbedone.blogspot.com

That did the trick. I added the following code and it works just like I want it to.

</asp:UpdatePanel>
<ajaxToolkit:TabContainerID="tabNotUsed"runat="server"Visible="true"/>

Thanks for the help!

Luke

Tab control - where do you put update button?

Hi - with the tab panel control, do I need to have an 'update' button on each tab to save any details updated on that tab, or will one Update button, outside the TAB container, be able to 'see' all of the controls on each page? Or do you need to do a findcontrol to get to your controls on each of the tabs?

Thanks, Mark

Mtait,

You should be able to access the controls directly off the tabs. So an update button outside of the TabContainer should be just fine.

Regards.

Tab Control Not working Properly in Update Panel.

I am having one update panel. inside that having some ASP Controls and a Tab Control. Now whenever this Update panel tries to Update, My tab control gets disappeared. It is not displyaed on the page.

Can you elaborate on what you are trying to do eg.

UpdatePanel -> Tab Container -> Tab - Some ASP.NET controls

Also, are you doing this in the Designer in Visual Studio? ie drag and drop designing.? otherwise?

Hi mistry,

To indicate the real problem, your source code is needed.However , here is the url that has a sample shows how to use these controls (Please focus on the source code). Hope it helps.

http://forums.asp.net/p/1128124/1784927.aspx#1784927

If your problem is still exist, please let me know.

Hi,

I tried what you described, it worked fine. Here is my code:

<%@. 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) { Label1.Text = DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <ContentTemplate> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

You may compare it with your code to find out the reason.

tab control problem

I have a default page that takes it from master page, I have put update panel and model pop up inside the my default page. Now I want to use Tab control for my default page. Three tabs, and when they click first one my panel1 will display, second tab clicked panel2 third panel3 will display. I have my pop up on panel 2.

I have created everything by watching video from example, but I cannot see my panel 2 and 3, only can see panel1. What I need to add. Maybe javascript?

Hi,

Here is a sample page made according to your description, please try it. In masterPage, there is nothing more than a ScriptManager.

<%@. Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Panel 1</asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <ContentTemplate> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"> Panel 2</br> <asp:Panel ID="Panel4" runat="server" Height="50px" Width="125px"> Popup<br /> <asp:Button ID="btnOK" runat="server" Text="OK" /></asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel4" OkControlID="btnOK" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> <asp:Button ID="Button1" runat="server" Text="Pop" /> </asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <ContentTemplate> <asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"> Panel 3</asp:Panel> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </ContentTemplate> </asp:UpdatePanel>  </asp:Content>

Tab headers of Tab Container within the Update Panel

I have a TabContainer inside of Update Panel. It seems that the background style of the tab header don't shows.

<asp:Button ID="Button1" runat="server" Text="View Tab" />

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>

<table id="Table1" runat="server">
<tr>
<td>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 1" runat="server">
 <ContentTemplate>
Text 1
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 2" runat="server">
 <ContentTemplate>
Text 2
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Is there any other ways to bring back the background style of the tab header.

Thanks in advance

Please help me on this...

You can add a CSS class to your TabContainer. The toolkit ships with the style ajax__tab_xp to ensure its loaded see below.

<Ajax:TabContainerID="TabContainer1"runat="server"CssClass="ajax__tab_xp">

If you still experince issues use fiddler www.fiddlertool.com to check that the XP style sheet is sent as a web resource.

Tab Index and Update Panel

Hi All,

I'm having an issue where any updatepanel that does an async postback IE 7 and IE 6 will lose the tab order when the partial postback occurs.
Below is some example code you can paste into a new code page and view the issue. Just run the page in IE and tab, it will work correctly, but if you push the button which does a small postback you will notice the tabindex reset itself. Can anyone explain this or possibly confirm this is a bug. Ive seen numerous posts that discuss this but only give a javascript solution. It seems like IE should handle this correctly considering firefox does

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanelID="upnlTest"runat="server"UpdateMode="conditional"><ContentTemplate>
<asp:TextBoxID="txtTest"runat="server"AutoPostBack="true"TabIndex="1"></asp:TextBox>
<asp:ButtonID="tstButton"runat="server"TabIndex="2"Text="Push Me"/>
</ContentTemplate></asp:UpdatePanel>
<asp:TextBoxID="txtTest2"runat="server"TabIndex="3"></asp:TextBox>
</form>
</body>
</html>

Any thoughts or help with this would be appreciated.

TIA,

AjaxButter

I'm having the same problem, any solutions?

Could you use server side code and re-establish the tab order?

txtTest.TabIndex="1"

txtTest2.TabIndex="2"

Do you need to have the AutoPostBack="true" in the txtTest TextBox? That seems to be what is causing the problem. As soon as you tab out it fires a __doPostBack().
You could try adding a trigger for the txtButton Button and setting the UpdatePanel to have the attribute ChildrenAsTriggers=false, this will let you tab through the fields without having the postback lose your focus.

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanelID="upnlTest"runat="server"UpdateMode="conditional"ChildrenAsTriggers=false>
<Triggers><asp:AsyncPostBackTriggerControlID=tstButtonEventName=click/></Triggers>
<ContentTemplate>
<asp:TextBoxID="txtTest"runat="server"AutoPostBack="true"TabIndex="1"></asp:TextBox>
<asp:ButtonID="tstButton"runat="server"TabIndex="2"Text="Push Me"/>
</ContentTemplate></asp:UpdatePanel>
<asp:TextBoxID="txtTest2"runat="server"TabIndex="3"></asp:TextBox>
</form>
</body>
</html>

Cheers,
Al

I havn't tested this but I read somewhere on these forums before that placing the tab control within an update panel will make it hold its tab index after a partial postback.

But as I said I dont know if this works. Let us know if it does.....

Ignore my previous post, I read your initial post too quickly and thought it was about the tab control.

Yes I have the same issue with loosing the tab index on the controls after a postback. I think there is scriptmanager.setfocus command you can use to reset the focus...

Well first off just want to say thanks for the replies. As far as setting the code server side that doesn't work even with making the call it still sets you into the address bar. As far as Al goes I need to have the postback as some code is firing that is needed, Also mind you that the tabbing stays correct in firefox even with the postback as you would expect. As far as the scriptmanager.setfocus I considered using this but I have around 50 controls on a page which means i would have to setup one per postback. Times that around 40 pages and that equals a lot of work. I truly think this should be considered a bug unless someone at microsoft our in there development teams can tell me possibly what im doing wrong or confirm this is an issue.

Any help with this is greatly appreciated.

AjaxButter

Hi AjaxButter,

Is it possible to replace the AutoPostBack and handle it through some JavaScript? You could at least get around having the issue of the PostBack losing your field focus. You could execute script in JavaScript with an onBlur event handler and take care of any of your PostBack needs that way. It might mean changing a lot of how you are doing things now, but the data from the TextBox could be web serviced back via JavaScript and you could achieve the same processing on the server. It seems like a lot of work though just to fix a tab focus issue.

Depending on how complicated your form is you could use some JavaScript to simply keep track of the most recently focused field and when the UpdatePanel finishes updating simply bring the focus back to that particular field. It wouldn't take much, you just need to set a variable with the latest form DOM field either when that field gets onFocus or onBlur and then bring the focus back after the UpdatePanel updates:

<

scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args){
if (args.get_panelsUpdated().length > 0){
$get(LASTFOCUSEDFIELD).focus();
}
}
</script>

That example above is a bit 'simple' and there are better detailed uses of the PageRequestManager class here:
http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

I'm probably starting to go way down a path you won't want to venture down. Haha... I'm starting to ramble, but hopefully these ideas may help. :)

Al

Al,

First off just want to say thanks for the reply back. As far as your two suggestions we are nearing completion on this site and there is probably close to 30 pages and each page has various functionality that postbacks at various times. To create a web service would be an entire redesign of the site which is just not an option. Also that seems to me as defeating the purpose of using ajax and partial rendering as you would essentially be writing code which does what their code is doing only slightly different. The only thing wrong with your second suggestion is if I have the tab go back to the field it just left in some instances it would just recause the postback to occur when you again retabbed from that field. We have actually thought about going that way but it would be a lot of work as we would need to put the name of the next field in the tab order on the fields onblur event that comes before it. Daunting task when each page has roughly 100 controls on it. I guess I was dreaming in hopes that maybe someone could tell me yes this is a bug in IE and it should be getting fixed.

I have a feeling if I don't get any better suggestions soon we will have to just keep pushing on.

Thanks,

AjaxButter

Here a workaround is explained:

http://www.codeproject.com/useritems/MainatinFocusASPNET.asp?df=100&forumid=384902&exp=0

Thanks for the reply I will give that a shot as it sounds simple enough to implement. I still think this is a bug that should be fixed. The only thing that concerns me with this solution is the fact your having to add the script call to almost every control and the settimeout call, granted its a short one. I'm wondering if its going to have a performance hit with it as we are already doing recursive ui loading from business objects. Either way I'll give it a shot.

AjaxButter

i have written a post on CodePlex to solve that problem...

http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=7194

I hope it helps

Cheers!

Well I checked out your workaround and it looks like its unrelated to the issue in this thread. The issue in this thread is that an asynchronous postback causes IE to reset the tabbing back to the address bar if tabindex is set on your fields and a async postback occurs. The issue you posted in regards to was the tabcontainer. As far as the issue goes I decide to go with my own workaround that takes place in my masterpage. I record the field id posting back when its async and find the next field in the tab order based on tabindex and then use scriptmanager.setfocus passing the next control in the tab order. very cludgy and still think that microsoft should consider looking into this issue as firefox works perfectly.

AjaxButter

you are right!,i have written in a wrong post.

Sorry!

I also have same prblm.

Tab order prblem when using update panel

I am using update panel and multiview control. I am having tab order probelm. The tab postioning is not happening properly. I think this is because of Ajax control.

Any Suggestion or solution ?

Can you post some code details

So it will help to solve your problem

Can you provide us with a simple repro of your issue?

Best Regards,

Have you suffered from problems like if something get refreshed on tab2 it shows tab1 insted of tab2

Tab Panel - How do I move to a different panel programatically

I have a page with a tab container and two tab panelsOn the first tab panel is a gridview contained within an update panelI want to be able to click on a link in the gridview and have the page display the second tab.Whilst the gridview's selectedindexchanged event is firing the line:tabsXMatchResultPage.ActiveTab = tabXmatchResult;doesn't do anything.I can move between the tabs by clicking on them but I need to be able to move to the second panel from a click in the gridview.I have tried this with the update panel's UpdateMode set to "Always" and "Conditional" and that made no difference.(On other pages I have used the tabContainer.ActiveTab=requiredtabpanel statement in the page load event to display a particular tab at that point and that has worked fine) Thoughts on this would be much appreciatedThanksNeil

Bumping this message up the list as this is becoming a real pain and I need to know why the line

tabsXMatchResultPage.ActiveTab = tabXmatchResult;

isn't resulting in the activetab becoming the one requested.

The gridview's selectedindexchanged event is definitely being fired but the code to change the Active Tab doesn't do what it should.

I've now gone back to basics and created a new Ajax enabled web site.

The aspx page is:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Changing Tabs</title>
</head>
<body>
 <form id="frmAccessAccordion" runat="server"
 <script type="text/javascript" language="javascript">
 function ActiveTabChanged(sender, e)
 {
 __doPostBack('<%= MyTabs.ClientID %>', sender.get_activeTab().get_headerText());
 }
 </script
 <asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
 <ajaxToolKit:TabContainer ID="MyTabs" runat="server" OnClientActiveTabChanged="ActiveTabChanged"
 OnActiveTabChanged="ActiveTabChangedServer">
 <ajaxToolKit:TabPanel runat="server" ID="tabOne" HeaderText="One">
 <ContentTemplate>
 Tab One
 </ContentTemplate>
 </ajaxToolKit:TabPanel>
 <ajaxToolKit:TabPanel runat="server" ID="tabTwo" HeaderText="Two">
 <ContentTemplate>
 Tab Two
 <asp:Button runat="server" ID="btnServer" Text="Submit" OnClick="changeTab" />
 </ContentTemplate>
 </ajaxToolKit:TabPanel>
 <ajaxToolKit:TabPanel runat="server" ID="tabThree" HeaderText="Three">
 <ContentTemplate>
 Tab Three
 </ContentTemplate>
 </ajaxToolKit:TabPanel>
 </ajaxToolKit:TabContainer>
 </form>
</body>
</html>

The Code Behind file is: 

 using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
 ScriptManager1.RegisterAsyncPostBackControl(MyTabs);
 }
 protected void changeTab(object sender, EventArgs e)
 {
 MyTabs.ActiveTab = tabThree;
 }
 protected void ActiveTabChangedServer(object sender, EventArgs e)
 {
 if (MyTabs.ActiveTab == tabOne)
 {
 }
 if (MyTabs.ActiveTab == tabTwo)
 {
 }
 if (MyTabs.ActiveTab == tabThree)
 {
 }
 }
}

From everything I have read the clicking of the button on tab two should result in the display of tab three... but it doesn't.

Can anyone else get this working successfully? 

Tab Panel, Update Panel, and TabOrder

I am having a problem with my update panel and tab panel where it will not recognize my form elements and let me tab to them.

I have an update panel that is a conditional update. When this is updated, it is making a tab enabled in the tabcontainer. (this is the second tab that is visible)

When this is done, I set the focus to the first form element (drop down list box) using the Script Manager.

The problem is when I tab, it goes directly to the address bar in IE 7.0. Even if I hit the tab several times, it will never come back to the drop down list even.

Now here is where it gets wierd. If I click the first tab and then go back to the second tab, I can hit the tab key and everything works right. Why would this be happening?

Thanks,

Keith

ok, I figured out what was happening.

I had a tab that was disabled for various reason.

one control on the tab was trying to show a modal dialog box. It was resulting in an error because the control wasn't passed back to the client. This caused all kinds of havoc apparently. I fixed this so that the control wasn't inappropriately calling the show modal dialog and all tabs were fine again.

Tabbing out of a textbox...

Just a word of warning - I am not very familiar with Ajax.

I have a few textboxes and a button within an update panel. When the button is clicked some data is retrieved (using Ajax) and some of the textboxes are filled with that data. I would like to remove the button click step, and instead have that data retrieved when the user leaves the first textbox. So, the user is in a name textbox. They type "Billy Bob," and then tab out to the next textbox (or click out of it to another textbox), at which time Ajax does it's asynchronous stuff to retrieve the data from the server for that name. Is this possible to do?

Thanks in advance!

You could try the TextChanged event of the first TextBox, remember to set theAutoPostBack value to true in the TextBox to generate a postback when you tab out of the TextBox.

hello guys,

yes, this will work, if you're using an updatepanel. anyway, it might not "feel right" to the user since the contents that are inside the panel will be refreshed (which meaans that he migh be writing something on another textbox and then when he looks at it, everything has been "replaced" by the contents sent from the server...

Absolutely right, I prefer to use WebServices or pagemethods to do something like this, infact I don't use UpdatePanels at all in my application for this (and other reasons.), but I think he is using an UpdatePanel at the moment.

Thank you both for your help. I was able to get it to work by using the textbox as the trigger.

Luis, I understand what you're saying about the workflow not feeling right. There are other underlying problems within this page (I didn't originally design it though!) and what it does that made me look at doing this as an option to fix some of those problems. But the more I look at it, the more I think that it just doesn't "feel right." =)

I probably won't implement this solution in the end. Thanks for the help!

TabContainer in an Update Panel dissappears after an event is fired in an update panel

Hello :

I have a TabContainer in an Update Panel. When ever an event fires in an update Panel such as Button onclick , the TabContainer dissappears.

I also tried to move update Panel inside the TabPanel . I tested this at 2 different Places. One is on a Page and the other sits in a panel that is displayed by Modal Popup. When the event fires , the one in the Page is still visble and I have a JS error . The one that sits in the ModalPopup dissappears with same JS error.

Here is the error , I am seeing

this.get_element() has no properties

_app_onload(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 217)

(no name)()ScriptResource.ax... (line 50)

_handler(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 2503)

Sys$_Application$raiseLoad()ScriptResource.ax... (line 3754)

Sys$WebForms$PageRequestManager$_pageLoaded(false)ScriptResource.ax... (line 1191)

Sys$WebForms$PageRequestManager$_scriptsLoadComplete()ScriptResource.ax... (line 1229)

(no name)()ScriptResource.ax... (line 50)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3297)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$loadScripts(0,function(),null,null)ScriptResource.ax... (line 3198)

Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 1177)

(no name)()ScriptResource.ax... (line 50)

_handler(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 2503)

Sys$Net$WebRequest$completed(Object)ScriptResource.ax... (line 4458)

_onReadyStateChange()ScriptResource.ax... (line 4009)

this.get_element().style.visibility = 'visible';

Can any please let me know how this problem can be resolved.

Thanks,

Rajesh

After little struggle , I found that TabstripContainer when in update Panel disappears.

For Ex i have this secnario :

<Page>

<updatepanel>

<usercontrol>

<TabStripContainer></TabstripContainer>

</usercontrol>

</updatepanel>

</Page>

The TabstripContainer in UserControl dissappears when an even fires in UserControl.

So i need to arrange the above as follows

<page>

<usercontrol>

<TabStripContainer>

<TabPanel>

<updatepanel

</updatePanel>

</TabPanel>

</TabstripContainer>

</usercontrol>

</page>

Hopefully this issue will be resolved. cause update panel is being used alot for partial rendering.

I have the same problem with TabContainer disappearing after a click on a button outside of it when both the TabContainer and the button are contained in an UpdatePanel.

Are there any solutions for this problem yet?

I must have the button in same UpdatePanel as TabContainer, but visually below the container.

Have you seen this thread:http://forums.asp.net/thread/1549317.aspx

Thank you very much! This fixes the bug! Sorry for not searching forums thoroughly enough.

So I understand that we need to modify Tabs.js dispose method

to dispose : function() {
Sys.Application.remove_load(this._app_onload$delegate); // this is missing
AjaxControlToolkit.TabContainer.callBaseMethod(this, "dispose");
}

But how are you explicitly using the TabContainer to use this Javascript. I am using AjaxControlKit.dll with no source code.

So what I did is I copied Tab.js into my project and modified the dispose method. And for the tabcontainer , I pasted the path to this Tab.js in

ScriptPath property7.But then I am getting a Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'System.Web.UI.Control'.

What am i doing wrong here.

I took the sources of AjaxControlKit.dll and recompiled them after making the change in Tabs.js
Yep , basically , Jason Hill did the same thing.And it worked.
Yep , basically , Jason Hill did the same thing.And it worked.Thanks
Yep , basically , Jason Hill did the same thing.And it worked.Thanks guys
Note we did a refresh release yesterday (10201) and this issue is addressed in that release. It's available from CodePlex.

TabContainer Firefox problem

I am using tabContainer for tabed navigation with update panels inside tabpanel for async updates to the server.

Ome tab panel contains FCKEditor. I have experinced 2 errors on the page when using Firefox:

1. The page is loading very slowly and the following message is displayed in the status bar:
"Transfering data from localhost"

2. FCKEditor when used inside tab panel and updatepanel will losse the text entered when I try to update asinc to the server.

I have tried the following solution but it did not work:
http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

The most relevant error in Error console seems to be the following:
Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File:http://localhost:56780/WebResource.axd?d=MJBzFYTfWN4CIFiUGFH5fLnKi97ZUvWrbLbcxzkrjzR4fE38RehHyps3lRxPqwg76Z_83olVsuwUqCCjsO2ZJw2&t=633130226175471389
Line: 5

With the following data:

/* default layout */.ajax__tab_default .ajax__tab_header {white-space:nowrap;}.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

There is also a bunch of css errors.

Needless to say everything works perfectly in IE 7.

Any help/suggestions will be greatly appreciated.

P.S. To isolate the problem - I have taken fckeditor out of the page and everything works fine. Then I added FCK Editor outside of update panel and tabcontainer and the problem reappeared, hence it is safe to conclude that the problem is related to FCKEditor.

Solved the problem.

FCKEditor subfolder containing all the setting,images etc for FCK Editor MUST be placed in the root folder of a web application. Probably there is a way to do it but it is not an issue any more.

TabContainer inside UpdatePanel

Hi i have a TabContainer inside my UpdatePanel and when i try and load the tabcontainer inside the update panel the formatting disappears. The Tabcontainer still works i can move between the tabs but the background behind the tabs is not there only the header text for the tab and the content of the tab itself no background for the body. If i take out the update panel then the tab container works fine.

The heirachy of my page is

Main form -> Usercontrol -> UpdatePanel -> TabContainer -> Tab Panels

Any help on this would be great as i have been searching for days now and cannot find an answer.

This seems to be a bug (as far as I can see on the codeplex site) and will be corrected in the next release. The problem is the the webresource.axd is not loaded when tabcontainer is inside an updatepanel. As a workaround what u can do is place a tabcontainer outside the updatepanel (I have placed it in my masterpage) and use a div styled with display:none surrounding the tabcontainer to make invisisble.

Like so:

In my masterpage

....

<div style="display:none;">

<ajax:TabContainer runat="server"></ajax:TabContainer>

</div>

</html>

I forgot to say that this makes your actual tabcontainer (the one inside an updatepanel) display the formatting correctly...

Hope it help
Thanks heaps jole. That has worked perfectly. I have been struggling on this issue for days so very relieved

I am having the same issue and I also tried your solution. It did not work for me. I tried adding another TabContainer to my page but that did not solve the problem. I was hoping you had another solution :) My problem actually causes a javascript error; "Error: this.get_element().style' is null or not an object". Any help or ideas would be greatly appreciated.

Tabcontainer Postback Problem.

Hi friends,

I have a tabcontainer with six tabs in it. each tab has got a usercontroll. when i update contents in one tab it automaticaly loads all usercontrols in all six tabs . this slows down my application.i ahve wrapped each usercontrol with update panel with update mode = "conditional", still its not working. any idea on how to stop postback on other tabs when in update one tab.

Thanks

sandsanz

is your server side page_load wrapped in a page.ispostback? (in main page and all user controls?) is your outermost update panel set to conditional too? i've got the same scenario with tab controls and update panels (update containing 6 tabs containing updates and some with more tabs and updates) and it took some playing to get it to work right. All user controls load on the content page's page load and only reload on exposed methods...

Thanks Friend,

Actually my tabcontainer is not in update panel.. but each tabpanels inside it are in update panel with update mode condition. and all my usercontrols contains gridview.if i update one gridview in one usercontrol. it updates all usercontrols and application is terribly slow coz of that.i appreciate ur help.

Thanks

how do you originally load the grids and how are you updating the grids? (events?)

Hi,

Thank you for your post!

Are you create your usercontrols dynamically on the Init Event?

If so, no way to avoid the issue. I suggest you create your usercontrols at Design Time.

If not, create a simple repro of your problem for us, I cann't understand you well.

If you have further questions,let me know!

Best Regards,