Ajax Tabs OnClientActiveTabChanged error

I have 3 tabs .OnClientActiveTabChanged event I am calling a function which is defined in a separate javascript file.My code works when I have the script code in same file as aspx page. But it throws javascript error when i have the code in a seprate javascript file. "Null is null or not an object" var InslastName = $get(''); var InsFirstName = $get('');The InslastName and InsFirstName are always getting as null when using external script file.I tried to use the ids 'txtInslastName' and 'txtInsFirstName' in the function,but getting error.I have many attributes in my aspx page . So i cant pass ClientID as parameter to the function.Is there any way to get resolve this issue?

Hi Sarathmn,

We cannot use Control.ClientID on a separate js file. Your problem is mainly caused by the ClientID issue. When a TextBox inside a TabPanel, its ClientID looks like this TabContainer1_TabPanel2_TextBox1, so you can find out the real ClientID from the generated HTML code and modify your js functions. Here is the another way which I would prefer.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" OnClientActiveTabChanged="tabChanged">

function tabChanged(sender, args){
tabIndex = sender.get_activeTabIndex();
switch(tabIndex)
{
case 1: myfunction('"<%=TextBox1.ClientID%>"');break;
case 2: myfunction('"<%=TextBox2.ClientID%>"');break;
break;
}
}

myfunction is a function inside the separate js file.

I hope this help.

Best regards,

Jonathan

Thanks Jonathan for your reply.

I have a doubt.

Can I assume that the client side id of the controls inside a TabPanel have "TabContainer1_TabPanel2_" pre-fixed with the actual id?

Hi Sarathmn,

Currently, yes. But if you put the Tab control inside another contol, it is hard to say.

I hope this help.

Best regards,

Jonathan

AJAX TabPanels and user defined controls

Hi,

I've built a control in which I implement the behaviour described in this video:How Do I: Trigger an UpdatePanel Refresh from a DropDownList Control? Basically, I want to update the nodes of a TreeView when I change the item in a DropDownList.

This works great except if I load the control dynamically into a tab panel...In this case, the first SelectedIndexChanged event doesn't trigger anything and all of the following events trigger a full page postback...

So, to sum this up:

User control statically defined in a page -> OKUser control statically defined in a tab panel -> OK (it works when I put the code of the control inside the tab panel)User control dynamically loaded into a placeholder -> OK (using PlaceHolder1.Controls.Add(Page.LoadControl("WebUserControl.ascx"));)User control dynamically loaded into a tab panel -> NOT OK! (using both TabPanel1.Controls.Add(Page.LoadControl("WebUserControl.ascx")); and TabPanel1.ContentTemplate = Page.LoadTemplate("WebUserControl.ascx");)

I can't put the code of the control inside the tab panel statically (point 2 in the previous list) because the tab panels are being generated dynamically also...

Anyone has suggestions to solve this, please??

When are you adding these dynamically created controls? It sould be during the Page_Init event and not later (such as during the Page_Load).

I'm not adding the controls in the Page_Init as I can't do that...when my page first loads it has only a DropDownList with a list of options.

Then, when the selected option is changed, there is a postback (as the DropDownList has AutoPostBack = "True") and only then the tabs are created and the user control is loaded.

The user defined control is being rendered and is visible, but its behaviour is strange...

If you dynamically add your contorls into an updatepanel, the issue comes.

There are few good articles written byScott Mitchell on dynamically loading Controls which you will find in the following links:

Dynamic Controls in ASP.NETWorking with Dynamically Created ControlsDynamic Web Controls, Postbacks, and View State