Retrieve the ActiveTabIndex value from an Ajax TabContainer using Javascript

Is there a way to retrieve the ActiveTabIndex from TabContainer when a tab is selected by the user? I've attempted the following approach without success.

<script type="text/javascript">
    function GetActiveTabIndex() {
        var tc = document.getElementById("TabContainer1");
        alert(tc.ActiveTabIndex);
    }
</script>

 <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="300px"
        Width="300px" CssClass="MyTabStyle" OnClientActiveTabChanged="GetActiveTabIndex">
        <asp:TabPanel runat="server" HeaderText="First" ID="TabPanel1">
            <ContentTemplate>
                <h1>
                    Tab 1
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Second">
            <ContentTemplate>
                <h1>
                    Tab 2
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
 </asp:TabContainer>

Answer №1

Creating a TabContainer in ASPX:

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Test1">
    <ContentTemplate>Test1</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Test2">
    <ContentTemplate>Test2</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Test3">
    <ContentTemplate>Test3</ContentTemplate>
</ajaxToolkit:TabPanel>


Using JavaScript to handle active tab change events:

<script type="text/javascript">

function clientActiveTabChanged(sender, args) {

    alert(sender.get_activeTabIndex());
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically hide a textbox in JSP based on the selection of a

On my JSP page, I have a textbox and a checkbox. I attempted to use jQuery and JavaScript to hide the textbox when the checkbox is checked, but it doesn't seem to be working. Below is the code snippet: <p class="contact"> <input id="check" n ...

Is it possible to utilize a single command in Discord.js to send multiple embeds?

Is there a way to create a unique bot in Node.js (using Discord.js) by utilizing Visual Studio Code? This exceptional bot should be capable of responding with various embed messages when given one specific command. I attempted using command handler, but u ...

How to fetch a pre-existing file with CodeIgniter

Currently, I am in the process of creating a website that allows users to download jpg, png, pdf, and docx files uploaded by an administrator. The file uploading functionality is working smoothly without any issues. Upon uploading a file, its name is stor ...

Uploading videos to a single YouTube channel using the YouTube Data API

I have been tasked with creating a node js app for a select group of individuals who need to upload videos. However, our budget is quite limited and we are unable to afford cloud storage services. I am curious if it would be feasible to create a key syste ...

Issue: Module 'connect' is not found?

Hey there! I'm fairly new to the world of servers, and I've been learning by watching YouTube tutorials. Following one such tutorial, I installed 'connect' using npm in my project folder. Here's the structure of my project: serv ...

What is the best way to convert exponential values to decimals when parsing JSON data?

var value = '{"total":2.47E-7}' var result = JSON.parse(value); Looking to convert an exponential value into decimal using JavaScript - any suggestions? ...

working with the express locals function

I've been trying to come up with a function that can access local variables, such as this one: // Retrieve user data by ID res.locals.findUser = function(user_id) { models.user.findOne({ '_id': user_id }, function(err, user) ...

IE encounters issues making Ajax calls when transitioning from secure HTTPS requests to insecure HTTP requests

I am currently facing an issue with my ajax CORS request. It is functioning perfectly on all browsers except for Internet Explorer. In IE, the request doesn't even attempt to go through and fails instantly without any error messages appearing in the c ...

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

"Explore the Hong browser designed specifically for enhanced Ajax functionality

I made the decision to revamp my new job by incorporating Ajax into the mix. Here is the code snippet I used to load pages: html <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" ...

Inspecting Facebook links

Currently working on a website and interested in incorporating a feature similar to what Facebook has. I'm referring to the link inspector, but I'm not entirely sure if that's its official name. Allow me to provide an example to clarify my r ...

The identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

Showcasing the JSON information across separate columns in a unique format

Query regarding organizing data into different columns based on labels. In the provided plunker, data from a JSON file is currently displayed and I need assistance in moving the second iteration to the FEMALE column. Thank you for any help. Plunker URL S ...

Unable to retrieve the /socket.io/socket.io.js file in the client-side application

My server side application is currently hosted on heroku: The code snippet that is relevant to this issue is as follows: const express = require('express'), app = express(), server = require('http').createServer(app), ...

Retrieve data from jQuery and send it to PHP multiple times

<input type="checkbox" value="<?= $servicii_content[$j]['title'] ?>" name="check_list" id="check" /> By using jQuery, I am able to extract multiple values from the table above once the checkboxes are checked. Here's how: var te ...

Service has not been properly declared

I encountered an issue with AngularJS where I am struggling to import a Service from one module to another. In the Data module, I have a Service named MenuDataService that I need to utilize in the MenuApp module. However, when attempting to do so, I receiv ...

Display a jQuery loading window

Need help with displaying a loading div when making an ajax post request. I've tried the following code but it's not working. Can someone please assist in resolving this issue? $(document).ready(function() { $('a.pagerlink').click( ...

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...

The 'SVGResize' or 'onresize' property is not available on the 'SVGProps<SVGSVGElement>' type

Using React with SVG I'm facing an issue with handling the resizing event of an svg element. I have looked into using the SVGResize and onresize events, but encountered compilation errors when trying to implement them: const msg1 = (e: any) => co ...

Having trouble converting the file to binary format in order to send it to the wit.ai api through node.js

I am having trouble converting an Audio file to Binary format for sending it to the Wit.AI API. The node.js platform is being used for this purpose. On the front-end, user voice is recorded using the Mic-recorder Module. Any guidance or suggestions would b ...