Home » Asp.netRSS

Change active tab in Ajax tab container using javascript

I have been using the ajax tab control. I need to change the active tab index of the tab container through javascript.

Can please anyone tell me how can i do it

Cheers

Sohail Sayed

 

18 Answers Found

 

Answer 1

Hi,

you can use the following javascript  function to set the active  tab: 

function SetActiveTab(tabControl, tabNumber)
{
  var ctrl = $find(tabControl);
  ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
}

tabControl: ID from the TabContainer Controls
tabNumber: Number of the new tab  (starting at 0)

Regards
Marc André

 

Answer 2

Thanks Marc,

I did it and it works good

$find('<%=TabContainer1.ClientID%>').get_activeTabIndex();

and

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

thnx for the reply

Cheers

Sohail SayedP>

 

Answer 3

Hi ,

I have a similiar issue with the post back under tab  container.

I have tried to use the Java script u mentioned..

but no luck so far.

I have couple of tab panels inside a tab container. Each tab panel got a few data controls in it, which loads on post back.

But on page load it keep on going to the first tab.

Alternatively, once i clicked the button control inside  any tab, it is showing that tab after it been clicked.

any suggesstion to work this out will be much appreciated.

Thanks in advance..

Cheers,

Barti...

 

Answer 4

it works only in firefox not in ie

 

Answer 5

barti:

Hi ,

I have a similiar issue with the post back under tab  container.

I have tried to use the Java script u mentioned..

but no luck so far.

I have couple of tab panels inside a tab container. Each tab panel got a few data controls in it, which loads on post back.

But on page load it keep on going to the first tab.

Alternatively, once i clicked the button control inside  any tab, it is showing that tab after it been clicked.

any suggesstion to work this out will be much appreciated.

Thanks in advance..

Cheers,

Barti...

Try using updatepanels inside the tabpanels!
 

 

Answer 6

luckyforu2006:

it works only in firefox not in ie

I am not sure this would help you out (it worked for me in ie && firefox):

The following code adds a clientside onclick event to the button which uses the SetActiveTab function send before:
protected void myButton_Load(object sender, EventArgs e)
{
  Button myButton = (Button)sender;
  int activeTabNumber=2;
  string script = string.Format("SetActiveTab('{0}', {1})", MyTabContainer.ClientID, activeTabNumber.toString());
  myButton .Attributes.Add("onclick", script);
}

This is the function send before again:
function SetActiveTab(tabControl, tabNumber)
{
  var ctrl = $find(tabControl);
  ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
}

 

Answer 7

Hi,

I've tried your suggestion but can't get it to work.

var ctrl = $find(tabControl); returns an object but I get "object doesn't support this property or method". It's as if the $find is return a standard object rather than a tabcontainer although the classname of the returned object is "ajax_tab_xp".

 any ideas why I can't get hold of the tabcontainer methods??

 

Cheers
Steve

 

Answer 8

Can you send me some code?

 

Answer 9

Hi Jafar,

Thanks for getting back to me. The code I'm using is below:

function SetActiveTab(tabControl, tabNumber)

{

var ctrl = $find(tabControl);

ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);

}

The script is embedded in an aspx page. When I call it from an event raised by a control on the parent page of the tab  container it works. However, when I call it from an event raised by a control inside a user control it doesn't work. I get "object doesn't support this porperty or method error". Any ideas??

 Cheers!

 

 

 

Answer 10

elric555:

However, when I call it from an event raised by a control inside a user control it doesn't work.

Ok, now you gave the reason why it is not working.
I just did some search to see the syntax of the $find method and it seems that is has also an optional argument for the parent control:

 

$find(id, [parent]);
just navigate to following link for more details:

http://sandbox.asp.net/ajax/documentation/live/ClientReference/Global/FindShortcutMethod.aspx

 

Answer 11

Thanks again Jafar, but I've tried passing in the parent and get the same result. I can find the tabcontainer control OK but the methods aren't available when I call them form an event raised by a dynamically loaded user control. It works fine when called from an evetn raised by a control raised on the page.

Not sure what's going on but have a workaround that will suffice for now.

Thanks for your help!

 

Answer 12

 can you share your workaround - same problem here

 

Answer 13

How to write this function in the aspx page.

 

Answer 14

Well i found one workaround.

Its not very neat, but worked for me.


#######

the problem is m object fetched using $find() does not support tabcontainer functions. but object returned by onclientactivetabchanged="tabchange" event does.


so what i did:-

Page_ClientValidate();

step 1 - declare a global javascript. 

step 2 - initialized this variable to sender object on event of tab  change.

step 3 - utilized this variable for needed purpose on any other event

Note:- for this workaround to actually work, user has to atleast once change  tabs, so as to raise ontabchange event. **this is a drawback**


#######



//code

var tabctrl; //global variable

function somefunction()   //any other function u wish to call, like from button click
{
tabctrl.set_activeTabIndex(7);
}
     
function tabchange(sender,e)  // function for handling onclientactivetabchanged event.
{
tabctrl=sender;
// any other code
}


//code ends

 

Answer 15

Well i found one workaround.

Its not very neat, but worked for me.

#######

the problem is :-

object fetched using $find() does not support tabcontainer functions. but object returned by onclientactivetabchanged="tabchange" event does.

so what i did:-

Page_ClientValidate();

step 1 - declared a global javascript. 

step 2 - initialized this variable to sender object on event of tab  change.

step 3 - utilized this variable for needed purpose on any other event

Note:- for this workaround to actually work, user has to atleast once change  tabs, so as to raise ontabchange event. **this is a drawback**

#######


var tabctrl; //global variable

function somefunction()   //any other function u wish to call, like from button click
{
tabctrl.set_activeTabIndex(7);
}
     
function tabchange(sender,e)  // function for handling onclientactivetabchanged event.
{
tabctrl=sender;
// any other code
}
 

Answer 16

hi

i have a panelContanner and 2 panel in it.

in first panel i have a gridview , i want to  focus panel2 and show detail  when user click on rows .

but i cant focus panel2 ,

how can i do that ?

 

Answer 17

thanks

 

Answer 18

with reference to my workaround posted earlier in this thread.


u can use


var tabctrl; //global variable

function somefunction()   //any other function u wish to call, like from button click
{
tabctrl.set_activeTabIndex(1);
}
     
function tabchange(sender,e)  // function for handling onclientactivetabchanged event.
{
tabctrl=sender;
// any other code
}



 
 
 

<< Previous      Next >>


Microsoft   |   Windows   |   Visual Studio   |   Follow us on Twitter