“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.
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...
Here’s the Link Button that calls the JQuery:
asp:LinkButton ID="reIssueLinkButton" runat="server"
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