Applying selected styles to a tab control after asynchronous postback occurrs

Question

I have been going crazy over a problem with my tab control.

It has to do with something messing up during ajax requests in ASP.NET and it's driving me crazy because I think I've gone through at least 50 different possible solutions to try to fix this problem.

Let me explain. I have a Tab control (a TabStrip). Its simply a table (generated with a Repeater control) that has one row and each column (each td element) is a "tab". Whenever a tab is clicked a corresponding div (Panel) is displayed.

This works, the corresponding div is displayed because I'm setting the div's style property to display:block.

The problem I'm having has to do with the styles applied to the td elements. There are 2 styles, one that indicates that the tab is selected, and the other is to indicate that the tab is not selected.

So when this user selects a tab, the corresponding div is displayed and the JavaScript function loops through the tds in the TabStrip and applies the "unselected" style to all of the tabs except the currently selected tab, in which case the "selected" style is applied.

This works awesome unless an Ajax request has ever occurred on the page.

For some crazy reason the css classes are no longer available to the JavaScript that controls the tabs. The tabs work (as in they display the corresponding divs) when clicked on except the styles are not applied to the tabs any more.

I've tried just about everything to get around this. I even created a JavaScript function that dynamically adds the link to the style sheet with the tab's styles in it to ensure that the style sheet was being loaded even during Ajax requests.

This did not help and I'm now considering a completely different approach but I have no idea how I'm going to do this.

What I want to do is set the style property of the tds instead of setting the className property.

The styles are stored in the external style sheet and I would like to keep them there so that I can easily change the style of the TabStrip using the style sheet whenever I want to without having to edit server code.

So...how do you get the style out of the styleSheet to parse it and apply the appropriate style properties to the element?

Do you have any other recommendations...because this idea seems to be quite difficult and at this point I'm wondering if I'm over looking some much simpler solution to this ugly problem.

Thanks for your help,

-Frinny

Answer 1

Parsing the style out of the stylesheet and putting it directly into the style element should be avoided. It is definitely a non-standard behavior. However, it it's the only possible way to accomplish your goal (which I doubt), you would load the file, parse it with regular expressions, do any replacing with regular expressions, then slap the result into your HTML.

A better solution would be to thoroughly analyze the HTML that your page is working with after one of these AJAX callbacks that confuses things. If you haven't got a tool that will let you see the current HTML (not the content which was downloaded), then you need to find one. Somewhere in there, you should see the reason why your things fail after the AJAX request.

Answer 2

I found the answer to the problem.

It had nothing to do with the style sheet. It ended up being a problem with the way I was registering the JavaScript arrays used for tabbing purposes in my .NET code with the ScriptManager.

It's long and complicated for me to explain so I'll just sum it up to this note:

The ScriptManager.RegisterArrayDeclaration() method will add elements to any already existing array...if the array doesn't exist it'll create one and then add elements to it. You should only call this function if you need to insert new elements into the array.

My problem was that the arrays used for tabbing purposes were doubling every time an asynchronous postback occurred. This meant that the tabbing JavaScript would select the appropriate tab and then deselect it when the value was found again in the array.

I got around my problem by using the Page.ClientScript.RegisterArrayDeclaration() method instead. This doesn't have the same behaviour.

Thanks for your time!

-Frinny