How can I get a tabcontainer ID using jquery or javascript?

Question

I have a tabcontainer in an updatepanel and I would like to display gridview below the tabcontainer. inside of tab container, it is ok to change when I press each tabs but I cannot make changes in a gridview when tab clicks.

Currently I can see that the javascript as below is working as I confirmed using alert.

<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.13.custom.min.js">
</script>
<script type="text/javascript">
function tabClick() {

    var selected_tab = $("#TabContainer1").tabs();


    alert(selected_tab);
    return;
}

I have a tabcontainer as below

<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" runat="server">
    <ContentTemplate>
    <div style="padding-left:205px">
        <asp:TabContainer ID="TabContainer1" runat="server" Width="955px" 
            Height="350px"  CssClass="fancy fancy-green" ActiveTabIndex="0" OnClientActiveTabChanged="tabClick">
            <asp:TabPanel ID="companyTab" HeaderText="Company" runat="server"  ForeColor="Black">  
                <ContentTemplate>
                       codes....

I have searched and found some codes such as tab.get_activetab however it doesnt work. if i type selected_tab. and visual studio came up with options that I can choose however there is no options for get_activetab or _activeTabIndex

I would like to get a active tab ID and pass the parameter to the C# code.

Is it possible??

Can someone please help?

Thanks

score 1 · Answer 1 · answered Mar 12 '13 at 21:35

1

First you can get the id of any element from a jquery object or native javascript object like so

   // jquery get id of html element
   $(myJquerySelector)[0].id
   $(myJquerySelector).attr('id');

   // native js get id of html element
   document.querySelector(myNativeSelector).id;
   document.getElementById(theID).id;

But your problem is beyond that. To get the id of the active tab, you need to just get that tab

   $('.ui-tabs-active')[0].id // will give you the id of the active tab

Then to pass that to your server you will need AJAX. So something like:

   $.post('/my/server/path', { id : $('.ui-tabs-active')[0].id });

That will post the id of the active tab to your server and c#.

answered Mar 12 '13 at 21:35

Fresheyeball

29,567
20
102
164

Thanks for your answer but sorry I couldnt quite understand..so myJquerySelector means use a selector to get my tabcontainer? is it like $("TabContainer1")[0].id? so use first codes that you posted and second code to get the id of the active tab then third code to pass it onto the server side? how can I use that id from the server side? Thanks – warang Mar 13 '13 at 20:34
"TabContainer1" is not a valid jquery selector but yes. I also do not know enough about your server to help you there. $.post will work like a normal post. – Fresheyeball Mar 13 '13 at 21:20

score 1 · Answer 2 · answered Mar 12 '13 at 21:55

1

For a straight javascript function I use this below to get the active tab:

 var tab = document.getElementById('tabContainer');
 var currentTabIndex = tab.control.get_activeTabIndex();
 var currentTabId = tab.control._tabs[currentTabIndex]._tab.id;

Then, use some AJAX to get the id back to the server.

answered Mar 12 '13 at 21:55

jiiri

330
1
12

I have tried that but it doesnt work for me.. first line is working fine i think as it displays null value if i use alert for tab. but from second line is not working. even if i put alert on my code, it is not displaying anything on my alert. – warang Mar 13 '13 at 20:44
Sorry.. realized I had tested this in an onTabChanged event. I moved it over to the onload instead. Try this: var tab = document.getElementById('tabContainer'); var currentTabIndex = tab.control._activeTabIndex; var currentTabId = tab.control._tabs[currentTabIndex]._tab.id; – jiiri Mar 13 '13 at 21:23

How can I get a tabcontainer ID using jquery or javascript?

2 Answers2

Linked