Help my ajax tabs appear to load twice

Question

0.00/5 (No votes)

See more:

So I have an Ajax tabContainer with three tabPanels with an autopostback="true" for the tabContainer. Everything appears to be working just fine except the fact that each time I or another user clicks on a tab it appears to load twice.

I say it appears to load twice because I've placed a breakpoint at page load and can ensure it only hits the page load event once. But the page shows the content on click then it goes away and loads a "second time".

I've read information about using CSS to solve this issue but I've yet to figure out how exactly to put this solution into my code.

Any help is greatly appreciated.
~Thanks

Below is the tabContainer and first TabPanel code, added per request for code snipets:

ASP.NET

<cc1:TabContainer ID="dataAdminTabContainer"  runat="server" AutoPostBack="true"
     Width="100%"
     ActiveTabIndex="0" >
     <cc1:TabPanel ID="companyTabPanel"  runat="server" HeaderText="Companies" >
         <HeaderTemplate>
             Companies
         </HeaderTemplate>
         <ContentTemplate>

         <asp:Panel ID="pnlAddluCompany" runat="server" Visible="true"  >
         <table style="margin-removed12pt; text-align: left;" class="fieldPanel" >
           <tr>
            <th class="cssDatagridHeader"  >

             <label id="lblMasterListCompany" style="text-align: left">Master List of Companies:</label>
            </th>
           </tr>
           <tr>
             <td valign="top" >
                 Engagement managers must ensure that certificates are created and saved to the
                 archive in order for certificate links to work. Certificate links are not
                 displayed to the user if the company has a Pending status.
                 </td>
               <tr>
                   <td valign="top" width="1245" >
                       <asp:Label ID="lblCompanyNewName" runat="server" Text="Company Name: "
                           ToolTip="This is the Company name to be created (or already created)."></asp:Label>
                        
                       <asp:TextBox ID="txtNewCompanyName" runat="server" CssClass="textBoxStyle1"
                           MaxLength="100" Width="175px"></asp:TextBox>
                        
                       <asp:Label ID="lblshort" runat="server" Text="Short Name: "
                           ToolTip="This is the short Company name"></asp:Label>
                        <asp:TextBox ID="txtNewCompanyShortName" runat="server"
                           CssClass="textBoxStyle1" MaxLength="30" Width="175px"></asp:TextBox>
                       <asp:RegularExpressionValidator ID="val_ShortName" runat="server"
                           ControlToValidate="txtNewCompanyShortName" Display="Dynamic"
                           ErrorMessage="Invalid short name. Use lowercase only, no special characters."
                           ValidationExpression="^[a-z0-9]{1,30}$"></asp:RegularExpressionValidator>
                       <asp:Label ID="lblEnterpriseIDCreate" runat="server" Text="Enterprise ID"
                           ToolTip="This is the Intel identifier/ROO/Ultimate ID for the company."></asp:Label>
                       <asp:HyperLink ID="hlEnterpriseIDCreate" runat="server"
                           NavigateUrl="http://goto/customerid" Target="_blank" Text="(Find):"
                           ToolTip="Click to find the Intel identifier/ROO/Ultimate ID for the company."></asp:HyperLink>
                        <asp:TextBox ID="txtEnterpriseIDCreate" runat="server"
                           CssClass="textBoxStyle1" MaxLength="10" Width="100px"></asp:TextBox>
                       <asp:RangeValidator ID="RangeValidEnterpriseID" runat="server"
                           ControlToValidate="txtEnterpriseIDCreate"
                           ErrorMessage="Please enter an integer representing a valid ROO."
                           MaximumValue="1000000000" MinimumValue="0" Type="Integer"></asp:RangeValidator>
                       <br />
                       <asp:Label ID="lbldomain" runat="server" Text="Email domain(s):"
                           ToolTip="Enter the domain portion of the email addresses for this company (starting with the @ symbol to the end). A semi-colon delimited list of acceptable domains is allowed."></asp:Label>
                         <asp:TextBox ID="txtNewEmailDomain" runat="server" CssClass="textBoxStyle1"
                           MaxLength="100"
                           ToolTip="Enter the domain portion of the email addresses for this company (starting with the @ symbol to the end). A semi-colon delimited list of acceptable domains is allowed."
                           Width="175px"></asp:TextBox>
                       <asp:RegularExpressionValidator ID="val_EmailDomain" runat="server"
                           ControlToValidate="txtNewEmailDomain" Display="Dynamic"
                           ErrorMessage="Invalid domain" ValidationExpression="^@[a-z0-9.;@-]*$"></asp:RegularExpressionValidator>
                       <asp:Label ID="lblstatusType" runat="server" Text="Select Status: "></asp:Label>
                        <asp:DropDownList ID="ddStatus" runat="server" CssClass="ddListStyle"
                           Width="100px">
                           <asp:ListItem>Approved</asp:ListItem>
                           <asp:ListItem Selected="True">Pending</asp:ListItem>
                       </asp:DropDownList>
                        
                       <asp:Button ID="btnAddCompany" runat="server" CssClass="labelStyle2"
                           OnClick="btnAddCompany_Click" OnClientClick="return validateCoFields();"
                           Text="Add New" ToolTip="Click to Add a new master company." Width="70px" />
                       <asp:GridView ID="gvLuCompany" runat="server" AllowSorting="True"
                           AutoGenerateColumns="False" DataKeyNames="luCompanyID"
                           DataSourceID="sdsLuCompany" OnRowDataBound="gvLuCompany_RowDataBound"
                           OnRowDeleting="gvLuCompany_RowDeleting" OnRowUpdating="gvLuCompany_RowUpdating"
                           PageSize="25">
                           <Columns>
                               <asp:TemplateField ShowHeader="False">
                                   <EditItemTemplate>
                                       <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
                                           CommandName="Update" Text="Update"></asp:LinkButton>
                                        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                                           CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
                                           CommandName="Edit" Text="Edit"></asp:LinkButton>
                                        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
                                           CommandName="Delete" Text="Delete"></asp:LinkButton>
                                       <asp:HyperLink ID="hlCertificate" runat="server"
                                           NavigateUrl='<%# Eval("luCompanyID", "~/Ticket.aspx?TicketType=PKICertificateCreate&EngageSpecific=false&luCompanyID={0}") %>'
                                           Target="_blank" Text="Cert"
                                           ToolTip="Request EC Rail Certficate for this partner company."></asp:HyperLink>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:BoundField DataField="luCompanyID" HeaderText="luCompanyID"
                                   ReadOnly="True" SortExpression="luCompanyID" Visible="False" />
                               <asp:TemplateField HeaderText="Company Name" SortExpression="CompanyName">
                                   <EditItemTemplate>
                                       <asp:TextBox ID="txtGridCompanyname" runat="server" CssClass="textBoxStyle1"
                                           MaxLength="100" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
                                       <asp:RequiredFieldValidator ID="RequiredFieldVal_GridCompanyName"
                                           runat="server" ControlToValidate="txtGridCompanyname" ErrorMessage="*"></asp:RequiredFieldValidator>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:Label ID="Label1" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:TemplateField HeaderText="Short Name" SortExpression="CompanyShortName">
                                   <EditItemTemplate>
                                       <asp:TextBox ID="txtGridShortName" runat="server" CssClass="textBoxStyle1"
                                           MaxLength="30" Text='<%# Bind("CompanyShortName") %>'></asp:TextBox>
                                       <asp:RegularExpressionValidator ID="val_GridShortName" runat="server"
                                           ControlToValidate="txtGridShortName" Display="Dynamic"
                                           EnableClientScript="true"
                                           ErrorMessage="Invalid short name. Use lowercase only, no special characters."
                                           ForeColor="Red" ValidationExpression="^[a-z0-9-]{1,30}$" />
                                       <asp:RequiredFieldValidator ID="RequiredFieldVal_GridShortName" runat="server"
                                           ControlToValidate="txtGridShortName" ErrorMessage="*"></asp:RequiredFieldValidator>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:HyperLink ID="hlCertPath" runat="server" NavigateUrl="" Target="_blank"
                                           Text=""
                                           ToolTip="Partner certificate - All users from partner companies must install an EC Rail-issued SSL Certificate in their browsers for authentication purposes."></asp:HyperLink>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:TemplateField HeaderText="ID" SortExpression="EnterpriseID">
                                   <EditItemTemplate>
                                       <br  />
                                       <asp:TextBox ID="txtEnterpriseID" runat="server" CssClass="textBoxStyle1"
                                           MaxLength="10" Text='<%# Bind("EnterpriseID") %>'></asp:TextBox>
                                       <asp:RangeValidator ID="RangeValidEnterpriseID" runat="server"
                                           ControlToValidate="txtEnterpriseID"
                                           ErrorMessage="Please enter an integer representing a valid ROO."
                                           MaximumValue="1000000000" MinimumValue="0" Type="Integer"></asp:RangeValidator>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:Label ID="lblEnterpriseID" runat="server"
                                           Text='<%# Bind("EnterpriseID") %>'></asp:Label>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:TemplateField HeaderText="Email Domain" SortExpression="EmailDomain">
                                   <EditItemTemplate>
                                       <asp:TextBox ID="txtGridEmailDomain" runat="server" CssClass="textBoxStyle1"
                                           MaxLength="200" Text='<%# Bind("EmailDomain") %>'></asp:TextBox>
                                       <asp:RegularExpressionValidator ID="val_EmailDomain" runat="server"
                                           ControlToValidate="txtGridEmailDomain" Display="Dynamic"
                                           EnableClientScript="true" ErrorMessage="Invalid domain" ForeColor="Red"
                                           ValidationExpression="^@[a-z0-9.;@-]*$" />
                                       <asp:RequiredFieldValidator ID="RequiredFieldVal_GridEmailDomain"
                                           runat="server" ControlToValidate="txtGridEmailDomain" ErrorMessage="*"></asp:RequiredFieldValidator>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:Label ID="lblEmailDomain" runat="server" Text='<%# Bind("EmailDomain") %>'></asp:Label>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:TemplateField HeaderText="Status" SortExpression="Status">
                                   <EditItemTemplate>
                                       <asp:DropDownList ID="ddSTatusInGridView" runat="server" CssClass="ddListStyle"
                                           SelectedValue='<%# Bind("Status") %>' Width="100px">
                                           <asp:ListItem Text="Approved" Value="Approved"></asp:ListItem>
                                           <asp:ListItem Text="Pending" Value="Pending"></asp:ListItem>
                                       </asp:DropDownList>
                                   </EditItemTemplate>
                                   <ItemTemplate>
                                       <asp:Label ID="Label4" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                                   </ItemTemplate>
                               </asp:TemplateField>
                               <asp:BoundField DataField="InsertDate" HeaderText="Created" ReadOnly="True"
                                   SortExpression="InsertDate" />
                           </Columns>
                           <EmptyDataTemplate>
                               No companies available.
                           </EmptyDataTemplate>
                       </asp:GridView>
                   </td>
               </tr>
             </tr>


                 </table>
                 <asp:SqlDataSource ID="sdsLuCompany" runat="server"
                     ConnectionString="<%$ ConnectionStrings:ECRailEngageConnectionString %>"

                     SelectCommand="SELECT [luCompanyID], [CompanyShortName], [EnterpriseID], [CompanyName], [EmailDomain], [Status], [InsertDate] FROM [luCompany] ORDER BY [Status] DESC, [CompanyName]"
                     DeleteCommand="DELETE FROM [luCompany] WHERE [luCompanyID] = @luCompanyID"
                     UpdateCommand="UPDATE [luCompany] SET [CompanyShortName] = @CompanyShortName, [EnterpriseID] = @EnterpriseID, [CompanyName] = @CompanyName, [EmailDomain] = @EmailDomain, [Status] = @Status WHERE [luCompanyID] = @luCompanyID">
                     <DeleteParameters>
                         <asp:Parameter Name="luCompanyID" Type="Object" />
                     </DeleteParameters>
                     <UpdateParameters>
                         <asp:Parameter Name="CompanyShortName" Type="String" />
                         <asp:Parameter Name="CompanyName" Type="String" />
                          <asp:Parameter Name="EnterpriseID" Type="Int32" />
                         <asp:Parameter Name="EmailDomain" Type="String" />
                         <asp:Parameter Name="Status" Type="String" />
                         <asp:Parameter Name="luCompanyID" Type="Object" />
                     </UpdateParameters>
                 </asp:SqlDataSource>
             </asp:Panel>

    </ContentTemplate>
     </cc1:TabPanel>

Posted 31-Jul-12 7:30am

Member 7768591

Updated 31-Jul-12 8:50am

v3

Add a Solution

Comments

R. Giskard Reventlov 31-Jul-12 13:45pm

We can't read minds: you'll need to show some code so we can get an idea of what you are doing.

Member 7768591 31-Jul-12 14:08pm

I didn't post it because I wasn't sure what people would want out of my code. This is a very large project and wanted someone to ask for specific pieces. Also this seems like a semi-common problem without a clear answer.

Anyway, what would you like me to post?

enhzflep 31-Jul-12 14:28pm

Showing the code that's called when the tab is clicked would be an excellent place to start. If this proves to be insufficient, we can always go from there.

It would seem that CSS (Cascading STYLE Sheets) should make no difference. But again, just start with the code that's called when the tab is clicked. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 31-Jul-12 14:43pm

Are u using "OnActiveTabChanged" event ?

Member 7768591 31-Jul-12 14:46pm

Actually I am not using the OnActiveTabChanged event. I tried using this but it seemed to have the same result and so I deleted the code since it didn't add any value. I am however going to post the html code of the first tab Panel into my original question.

I hope this helps people understand better.

enhzflep 31-Jul-12 16:37pm

Never done any work with ASP, so I'm plugging away in the dark her. Forgive me if my response is inappropriate.

I found this first page: ASP.NET AJAX TabContainer – Tips and Tricks that talks about avoiding postbacks when changing tabs, but it mentions changing asp:button to html buttons and using javascript, but I could only find one asp:button in your source, so my guess is that there's somewhere else that needs to be looked at.

I also found this (linked to in 1st page) How To: Lazy-load TabPanel's within the AjaxControlToolkit's TabContainer Control
But then I realized it's not a toolkit you appear to be using.

With that in mind, I probably shouldn't have answered as I feel it unlikely I've contributed anything. (But one can always hope!)

Member 7768591 31-Jul-12 19:22pm

I appreciate the effort, correct or not! :)

I am currently still at work so will have to read the articles a little later but I did want to let you know I am using the AJAX toolkit tabs, my code snipet just doesn't go up far enough to show me registering the assembly.

Also please let me know if you would like to see more/less of the code.

~Thanks

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 1-Aug-12 2:23am

So, how are you toggling between your tabs ?
Any other event ?
Can u show the event codes you are using ?

Member 7768591 1-Aug-12 11:35am

Ajax handles switching between tabs automatically with the autopostback="true" statement. I have many event handlers but none that actually move between tabs.

Would you have a suggestion on manually switching between tabs to fix it? As I stated previously I had tried that and it doesn't give me any different result.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2012-08-01T06:02:00

Try removing the AutoPostBack property as it is not needed.
I have used TabContainer before and there is no AutoPostBack property set.

Please let me know if it works for you or not.
If it will not work for you, then I have some links with me to do it in an other way... I will post those here by Improving my Answer.

Updated answer

I have searched for your issue and after a lot of research what I found is...

-> When Page directive autoeventwireup is true and you attach an event OnInit to things like Page_Load, those events will be raised twice, making it look like double postback. It could be semething else, too.
-> The problem also occurs when you have TabContainer inside one UpdatePanel, which is, I guess, your case.

Solutions

1. Set AutoEventWireup to false (this will also disable some custom control that was wired up)

2. For those who required AutoEventWireup to be true, just make sure all post back controls or buttons should not be server controls, instead they must be standard

HTML

tags and should NOT have

runat="server"

. Now you have to remove AutoPostback for TabContainer and do all the work with javascript...

And if you search in google for doing all the work in javascript you will find a lot of links...
Google- ajax tabcontainer and javascript[^].

Just try to implement and let me know...

Thanks...