UpdatePanel and JQuery Tabs CSS losing StyleSheet on update

This problems always seems to happen when you least expect it, or when you think that browsers would have come to realise this is an issue.  Anyway, I came across this problem last week and not just in IE, but also Chrome and Firefox.

I have a default.aspx page with a user controle, unit1.ascx.  Unit1.ascx has a user control  ImageList.ascx inside that.  This has a jQuery Tabs control inside that.

First clue on solving this was UpdatePanel Css StyleSheet upon partial-refresh bug in IE

However, the solution was fairly simple in the end.

replace the following

This captures the partial load and makes sure the jQuery is fired, although the state has been lost (We'll deal with that in a minute).  But looking at the memory leaks using sIEve more worryingly is that each time the updatepanel refreshes the amount of memory used by IE is increased. (thanks to http://www.codeproject.com/KB/ajax/jqmemleak.aspx  for pointing this out).

Adding the following disposable method in the jQuery helps to resolve this.

Now to the previous issue, the state of which tab was clicked.

All we need to do is capture the number of the tab selected, place this in a control that isn't affected by the update panel, then pas it back after the update.

To do this we need to make sure we get the value as an int but also the correct asp.net control from its id.  To do this we use ('[id$=hfSelectedTAB]') instead of $('#hfSelectedTAB').

below is the final code block

Many thanks to http://www.dotnetfunda.com and Stackoverflow