locked
Ajax Tab updatepanel issue RRS feed

  • Question

  • User-725520357 posted

    Hello Gurus,

      I am using TabPanel which loads usercontrol dynamically,here UC3.ascx is not loading properly,I understand the javascript is not loading properly.

    (usercontrols are inside folder named controls).Please help me with this.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Controls_Default" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <%@ Register Src="~/Controls/UC1.ascx" TagName="UC1" TagPrefix="UC1" %>
    <%@ Register Src="~/Controls/UC2.ascx" TagName="UC2" TagPrefix="UC2" %>
    <%@ Register Src="~/Controls/UC3.ascx" TagName="UC3" TagPrefix="UC3" %>


    <!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></title>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="sc1" runat="server" ></asp:ScriptManager>

    <table>
    <tr>
    <td>


    <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="true">
    <cc1:TabPanel ID="TabPanel1" runat="server">
    <HeaderTemplate>Home</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel1" runat="server">
    <asp:Button ID="btn" runat="server" OnClick="btn_Click" Visible="false"/>


    </asp:Panel>
    </ContentTemplate>

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn" />
    </Triggers>
    </asp:UpdatePanel>


    </ContentTemplate>
    </cc1:TabPanel>

    <cc1:TabPanel ID="TabPanel2" runat="server">
    <HeaderTemplate>Contact</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="Up2" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel2" runat="server">
    <asp:Button ID="btn2" runat="server" OnClick="btn_Click" Visible="false"/>

    </asp:Panel>
    </ContentTemplate>

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btn2" />
    </Triggers>
    </asp:UpdatePanel>


    </ContentTemplate>
    </cc1:TabPanel>

    <cc1:TabPanel ID="TabPanel3" runat="server">
    <HeaderTemplate>Office Map</HeaderTemplate>
    <ContentTemplate>
    <asp:UpdatePanel ID="Up3" runat="server">
    <ContentTemplate>
    <asp:Panel ID="panel3" runat="server">
    <asp:Button ID="btn3" runat="server" OnClick="btn_Click" Visible="false"/>

    </asp:Panel>
    </ContentTemplate>

    <Triggers>
    <%--<asp:AsyncPostBackTrigger ControlID="btn3" />--%>
    </Triggers>
    </asp:UpdatePanel>


    </ContentTemplate>
    </cc1:TabPanel>


    </cc1:TabContainer>


    </td>
    </tr>
    </table>
    </div>


    <asp:HiddenField ID="hdnhome" runat="server" />
    <asp:HiddenField ID="hdncon" runat="server" />

    </form>
    </body>
    </html>

    Default.aspx.cs

    --------------------

    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;

    public partial class Controls_Default : System.Web.UI.Page
    {
    ASP.controls_uc1_ascx uc1 = new ASP.controls_uc1_ascx();
    ASP.controls_uc2_ascx uc2 = new ASP.controls_uc2_ascx();
    ASP.controls_uc3_ascx uc3 = new ASP.controls_uc3_ascx();
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    uc1.LoadControl("~/Controls/UC1.ascx");
    }
    else
    {
    btn_Click(sender, e);
    }
    }
    #region btn_Click
    protected void btn_Click(object sender, EventArgs e)
    {
    if (TabContainer1.ActiveTabIndex == 0)
    {
    uc1.LoadControl("~/Controls/UC1.ascx");
    panel1.Controls.Add(uc1);
    // ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab1'); </script>", false);
    }
    if (TabContainer1.ActiveTabIndex == 1)
    {
    uc2.LoadControl("~/Controls/UC2.ascx");
    panel2.Controls.Add(uc2);
    // ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab2'); </script>", false);
    }
    if (TabContainer1.ActiveTabIndex == 2)
    {
    uc2.LoadControl("~/Controls/UC3.ascx");
    panel3.Controls.Add(uc3);
    // ClientScript.RegisterClientScriptBlock(GetType(), "clientscript", "<script> alert('This is Tab2'); </script>", false);
    }
    //panel1.Visible = false;
    }
    #endregion

    }

    Sunday, January 12, 2014 12:39 AM

Answers

  • User1734617369 posted

    Hi,

    According to your code you are doing the following at Page_Load:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    uc1.LoadControl("~/Controls/UC1.ascx");
                }
                else
                {
                    btn_Click(sender, e);
                }
            }

    that means that you are loading the UC1 control but you never assigns that to any place holder in the page so the tabs will be empty, I would also use the ToolkitScriptManager instead of the normal ScriptManager and use the OnActiveTabChanged event to load the content in the tabs.

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 15, 2014 1:21 PM

All replies

  • User-933407369 posted

    hi prasanth100,

    According to your decription, i think that you should use ToolkitScriptManager tag, as shown below:

    <%-- <asp:ScriptManager ID="sc1" runat="server" ></asp:ScriptManager>--%>
          <cc1:ToolkitScriptManager ID="sc1" runat="server" />

    If you need more assistance, please let me know.

    Monday, January 13, 2014 1:07 AM
  • User1734617369 posted

    Hi,

    According to your code for the user control I can guess that the problem is that the javascript isn't working? Are the controls showing correctly but the javascript won't work? If that is the case it is due to how you reference the control id's in the javascript, if you are referencing asp.net controls from javascript you must use the unique id of the control, for example you should use

    document.getElementById('<%= loan.ClientID %>')

    to get the reference to the loan textbox.

    Best regards
    Johan

    Monday, January 13, 2014 7:06 AM
  • User555306248 posted

    Are you getting nay javascript error? (see if three is any javascript error on the left bottom corner of IE)

    Monday, January 13, 2014 10:42 PM
  • User-725520357 posted

    Hi valuja,

    that worked fine. here the problem is, the user-controls are loading for the second time only, not the first time.

    I have pasted the code above,pls help me with this.

    Thanks in Advance.

    Wednesday, January 15, 2014 11:38 AM
  • User1734617369 posted

    Hi,

    According to your code you are doing the following at Page_Load:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    uc1.LoadControl("~/Controls/UC1.ascx");
                }
                else
                {
                    btn_Click(sender, e);
                }
            }

    that means that you are loading the UC1 control but you never assigns that to any place holder in the page so the tabs will be empty, I would also use the ToolkitScriptManager instead of the normal ScriptManager and use the OnActiveTabChanged event to load the content in the tabs.

    Best regards
    Johan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 15, 2014 1:21 PM