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

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: