JQuery Toggle Visibility Of A Div

“The longest journey begins with but a single step” – Probably Not Confucius

This was my first ever JQuery script and, though it be just one line long, I still learned something from it.

script
function setProgressBarVisible()
{
$('[id$=progressBar]').css('visibility', 'visible');
}
/script

This is the div that I wanted to hide/unhide:

div id="progressBar" style="position: fixed; left: 0; top: 0; background: orange;
visibility:hidden; padding: 10px; font-size: small;"
Update In Progress...
/div

Here’s the Link Button that calls the JQuery:

asp:LinkButton ID="reIssueLinkButton" runat="server"
Text='Reissue' OnClientClick="setProgressBarVisible();"
OnClick="reissueLinkButton_Click" /

All that code above works. If you copy and paste it into a JQuery-enabled project, an Orange rectangle will appear in the top-left corner of the browser when you click reissueLinkButton and automatically go away when the page reloads after the postback.

What I learnt along the way was that you have to use visibility=”hidden” in the Style attribute and not Visible=false in the Visible attribute.

Visible=false will not be toggled by the JQuery script because Visible can only be set if you make the div an ASP.NET Server control i.e. runat=”server”. If you do that then the ID property of the div will not be ‘progressbar’ but an ASP variable based on its container e.g ctl00_progressbar, so the setProgressBarVisible function cannot work.

So there you go. A single step. FWIW.

Here’s the page I Googled to get started.

For Advanced Students
The immortal DDK has a great post on Using jQuery to toggle visibility of an ASP.NET textbox based on an ASP.NET DropDownList Control

TabContainer LoadClientState Failed

We have a set of small Javascript functions that retain the ActiveIndex of an ASP Ajax Toolkit TabContainer control and restores it on postback. Sometimes, perhaps due to increased sunspot activity, our TabContainer ClientState disappears. Resulting in the intruiging and quite humorous error “When casting from a number, the value must be a number less than infinity.”

To this day I have no idea what causes TabContainer to lose its state, but courtesy of a fellow traveller in pain, I can present a workaround.

Meet The Javascripts

Here’s our happy little Javascript family from the picturesque village of MarkUp

In Head


function saveCurrentTabIndex()
{
var tabcontainer = $get('').control;
var tabIndex = $get('');
if (tabcontainer != null)
{
tabIndex.value = tabcontainer.get_activeTabIndex();
}
}

function restoreCurrentTabIndex()
{
var tabIndex = $get('tabIndexHidden');
if (tabIndex.value > -1)
{
var tabcontainer = $find( '');
var index = tabcontainer.get_activeTabIndex();
if (index != tabIndex.value)
{
tabcontainer.set_activeTabIndex(tabIndex.value);
}
}
}


In Body
input type=”hidden” id=”tabIndexHidden” runat=”server”

Last thing in markup:


function pageLoad(sender,e)
{
restoreCurrentTabIndex();
}


Family Dysfunction

So, like I said, sometimes TabContainer ClientState is null causing the bizarre ‘number must be less than infinity’ error message, I assume because null is not less than infinity. To work around it use the Javascript parseInt function to make sure TabContainer has an ActiveTabIndex it can grok.

Resolving Our Little Differences

In saveCurrentTabIndex:
tabcontainer.set_activeTabIndex(parseInt(tabIndex.value));

Now the ActiveTabIndex will be less than Infinity to the relief of all concerned with the possible exception of Buzz Lightyear.

Our Family Counsellor can be located here.. Thanks djs25uk