Tuesday, July 04, 2006


DIV and conquer

ASP.NET 2.0 becomes most unfriendly to JavaScript when you want to change the visibility of Web form controls. Documentation won't explain how to do this, but it's simple. Set style.visibility to "visible" or "hidden" for most browsers. Problems arise when you want to change controls such as CheckBox or RadioButton that generate multiple elements, an input and a label in these cases. Addressing a control in the usual way affects only one element. In these cases, it does not change the label.

The solution is to put an HTML DIV element around one or more controls that you want to change, such as:

< div id="ofDivCheck23" style="visibility: hidden" runat="server" >
    < asp:CheckBox ID="ofCheck23" runat="server" Text="Report Required" / >
< /div >

Be sure to put "id" in lower case, or Visual Studio 2005 will bark at you with a diagnostic such as "Error...name contains uppercase characters, which is not allowed," a rule routinely violated by its own markups.

With such a div element in place, show or hide everything that it brackets with JavaScript statements such as:

var oDivCheck23 = document.getElementById('< % = ofDivCheck23.ClientID % >');
var oCheckEnabled = document.getElementById('< % = ofCheckEnabled.ClientID % >');
if (oCheckEnabled.checked == true)
    oDivCheck23.style.visibility = "visible";
    oDivCheck23.style.visibility = "hidden";

[Note: because of display limitations, characters "< " and " >" here are shown with a space after or before them.]

Comments: Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]