Solved

Calling javascript from a Tabcountainer OnActiveTabChanged event

Posted on 2009-07-01
13
1,421 Views
Last Modified: 2013-11-08
Good day

How do I call a client side javascript from a Tabcontainer's OnActiveTabChanged event
<script language="JavaScript" type="text/JavaScript">

function ActiveTabChanged() {
 

            //get the tabContainer for later reference

            var tc = document.getElementById("TabContainer1a");
 

            //get the index of the tab you just clicked.

            var tabIndex = parseInt($find("TabContainer1a").get_activeTabIndex(), 10);
 

            //set the tabcontainer height to the tab panel height.

            if (tabIndex == 0) {

                tc.childNodes[1].style.height = 200;

            }       

        }
 

   

//-->

    </script>
 
 

  <cc1:TabContainer ID="TabContainer1a" runat="server"  OnActiveTabChanged = "ActiveTabChanged" ActiveTabIndex="0" CssClass="CustomTabStyle2"

            Width="657px" Height="100%">

Open in new window

0
Comment
Question by:qz2rg4
  • 6
  • 5
  • 2
13 Comments
 
LVL 18

Expert Comment

by:carlnorrbom
ID: 24752373
Hi,

You could try:

Protected Sub ActiveTabChanged(ByVal sender As Object, ByVal e As EventArgs) Handles TabContainer1a.OnActiveTabChanged
    ClientScript.RegisterStartupScript(Me.GetType(), "RunActiveTabChanged", "ActiveTabChanged();", True)
End Sub

/Carl.
0
 
LVL 18

Expert Comment

by:carlnorrbom
ID: 24752383
Hi,

Sorry, forgot, you might want to add some checking whether the srcipt has already been registered or not:

Protected Sub ActiveTabChanged(ByVal sender As Object, ByVal e As EventArgs) Handles TabContainer1a.OnActiveTabChanged
    If Not ClientScript.IsStartupScriptRegistered("RunActiveTabChanged") Then
        ClientScript.RegisterStartupScript(Me.GetType(), "RunActiveTabChanged", "ActiveTabChanged();", True)
    End If
End Sub

/Carl.
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24752447
On the TabContainer you can use:
OnClientActiveTabChanged="ActiveTabChanged"

Or on individual TabPanels you can use:
OnClientClick="ActiveTabChanged"
0
 

Author Comment

by:qz2rg4
ID: 24752454
Carl

Thanks for your reply.

I don't want to do a postback. As you can see in the code I want to change the tabpannel height on ActiveTabChanged

0
 
LVL 20

Accepted Solution

by:
ddayx10 earned 500 total points
ID: 24752457
Small sample:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 

<!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 runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript">

		function fireMe()

		{ alert('fired!'); }

		

    </script>

    

</head>

<body>

    <form id="form1" runat="server">

	<asp:ScriptManager ID="ScriptManager1" runat="server">

	</asp:ScriptManager>

		

	<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="fireMe" Height="150px">

		<cc1:TabPanel runat="server" HeaderText="Tab1" OnClientClick="fireMe"><HeaderTemplate>tab1</HeaderTemplate><ContentTemplate>...</ContentTemplate></cc1:TabPanel>

		<cc1:TabPanel runat="server" HeaderText="Tab2" OnClientClick="fireMe"><HeaderTemplate>tab2</HeaderTemplate><ContentTemplate>...</ContentTemplate></cc1:TabPanel>

		<cc1:TabPanel runat="server" HeaderText="Tab3" OnClientClick="fireMe"><HeaderTemplate>tab3</HeaderTemplate><ContentTemplate>...</ContentTemplate></cc1:TabPanel>

		<cc1:TabPanel runat="server" HeaderText="Tab4" OnClientClick="fireMe"><HeaderTemplate>tab4</HeaderTemplate><ContentTemplate>...</ContentTemplate></cc1:TabPanel>

	</cc1:TabContainer>

    </form>

</body>

</html>

Open in new window

0
 

Author Comment

by:qz2rg4
ID: 24752502
When I try to call the javascript I get the following

Error 163      does not contain a definition for 'ActiveTabChanged' and no extension method 'ActiveTabChanged' accepting a first argument could be found (are you missing a using directive or an assembly reference?)

Am I missing the obvious?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:qz2rg4
ID: 24752530
Sorry when I try and compile I get the above mentioned error
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24752632
I have tried to break this in every conceivable way possible, and on none of them do I get an error 163.

Yes it is almost certain your problem is something simple at this point, but what I dunno!

Could be something as simple as a misspelling, but I tried all those variations and didn't get the same error as you.

It sounds like a server error to me. Like it's trying to look for the server event ActiveTabChanged which has gotten itself associated with your TabContainer. Again I tried that and got different error, but that's not always a good indicator anyway.

Make sure:
a) on the tabcontainer (not tabpanel) you changed your property from OnActiveTabchanged to OnClientActiveTabChanged.
b) make sure you spelled everything correctly (it is case sensitive)
c) make sure you dont have a server side event property set on your control for now
d) make sure you dont have a server side event called ActiveTabChanged right now

The sample I put up works rock solid. It is using the newest ajaxcontroltoolkit TabContainer from June12. I doubt there's a bug in yours though.

e) Copy off your tabcontainer and make a new one, just adding the OnClientActiveTabChanged event and see how that goes.

You almost certainly just have something that got messed up during your testing, and its hiding.

If you want to post your code complete I will be happy to take a look.

0
 

Author Comment

by:qz2rg4
ID: 24752782
For some reason OnClientActiveTabChanged does not show in intellesense only OnActiveTabChanged. Something stupid indeed.
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24752798
So did that fix it?

I never said "something stupid" I hope...I hope I said and meant "something simple" :)

... everyone uses a control in a new way at some time or another, and everyone can use a fresh pair of eyes sometimes.
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24752808
Ouch...why for you give me a "B"? I fixed it first try, on the button, easy peezy, gave you a sample, followed up quickly and thoroughly, years of experience at your disposal, all I get is points...and a "B" :(

...Yes I argued with my teachers too.
0
 

Author Comment

by:qz2rg4
ID: 24752965
Sorry man new to EE If I could change it i would
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24753064
all is forgiven lol
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Loop not working 29 47
Not showing JavaScript in the list 5 38
ASP.net Javascript use multiple sliders 2 18
What namespace do I need to import? 2 0
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…
Internet Business Fax to Email Made Easy - With  eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now