Wednesday, March 28, 2012

changing button values on a tab

I have a AsP.net,VB.net app using tabs and I have two buttons at the bottom of the page that i want to change everytime the user goes to the next tab.

IE: btnBack and btnProceed, when you go to page two I want to change the image URL to be imageButtonBackToPage1 and imageButtonProceedToPage2 and so on, hope you get the idea.

Anyways, there are two ways for the user to go through the pages, 1 is using the tabs and 2 is using the buttons.

when the user uses the buttons i am able to change the imageurl easily but when the user uses the tabs nothing fires so I want to change the imageURl for the new page and saw that OnClientActiveTabChanged can find the active tab but I need a good example (of javascdript and HTML) of how to use this because I want to find out the active tabe and change the button images according to that.

Does anyone have good examples of how to do this? thanks.

Hi!

You could fire a post-back on Tab click using the following function, and setting the OnClientActiveTabChanged event toOnClientActiveTabChanged="ActiveTabChanged"

<script type="text/javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= TabContainer1.ClientID%>', sender.get_activeTab().get_headerText());
}
</script>

Then, on code behind, use the TabContainer_ActiveTabChanged to change any values for the buttons.

Hope this helps,


thanks, what is the syntax for aclling ActiveTabChanged in the aspx page (what do you pass for sender and e?

Also, I am doing this with Ajax so I dont think the postback will work.


Hi,

Just scroll down the events drop-down list on VS 2005 and select ActiveIndexChanged on the TabContainer Control, then use the ActiveIndex or the ActivePanel properties to apply any code you need.
On server side you are not catching the javascript function, just using it as a trigger.

Why the post-back wouldn't work because AJAX? It's just firing an event which otherwise doesn't get fired by default. You can put your TabContainer inside an UpdatePanel and set the TabContainer_ActiveIndexChanged event as a trigger and you won't notice the difference. I'm using this approach and it works perfectly.


Thanks, this helps greatly, i am still learning Ajax. if you can post any sample code that would be great. thanks for your help, this saved me a lot of time.

Hi! You're welcome!

Just post your code and let us know where you are stuck, but basically is something like:

Protected Sub TabContainer1_ActiveTabChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TabContainer1.ActiveTabChanged
If TabContainer1.ActiveTabIndex = 0 Then
Button1.ImageUrl = "YourPic"
ElseIf TabContainer1.ActiveTabIndex = 1 Then
Button2.ImageUrl = "YourPic"
End If
End Sub


thanks, almost there, one thing I noticed is that I had to set AutoPostBack=true for the TabContainer and now its capturing the event in the vb.net code. I thought I would be done with this task now but a funny thing is when I switch from tab to tab now its not changing the button images (i have code just like you wrote in your last post there) so I am really puzzled now, please let me know if any of you have any ideas. thanks.


Hi!

That's not a problem, just put your buttons inside UpdatePanels and call UpdatePanel.Update() from the TabContainer.ActiveIndexChanged event, or set the button's UpdatePanel triggers accordingly.


Thats it! thanks much, it works great now!


Hi! Well, I'm glad it helped!

Could you please mark the post answered to close the thread?

Cheers,

No comments:

Post a Comment