Solved

making user controls visible/invisible using javascript

Posted on 2004-08-23
3
237 Views
Last Modified: 2008-02-01
Hi experts,
I have a dropdown list that I want to use to make a custom user control visible or invisible depending on what is selected in the drop down.  Is there any way to do this?  I know I can do it by setting the drop down to auto postback, but is there a way to do it with javascript and not have to do a round trip to the server?

Thanks!
0
Comment
Question by:mbosch
  • 2
3 Comments
 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
Definitely.

First, make sure your custom control has a single containing html element.  For example, everything should be enclosed with a div element or something of the sort.  Don't create multiple elements like <div></div><div></div> but rather put everything into one container.

Second, in your javascript, you can use something lile this for the onselectedindexchange() event of your dropdown list:

<script>
function toggleCustomControlVisibility() {
  var dropdownlist = document.all[ 'MyDropDownList' ];
  if( dropdownlist.selectedIndex == 1 ) document.all[ 'MyCustomControl' ].style.display = 'none';
  else document.all[ 'MyCustomControl' ].style.display = 'block';
}
</script>

To assign this event to your asp dropdown list, on the server (in Page_Load() for example), add the following code:
MyDropDownList.Attributes[ "onselectedindexchanged" ] = "toggleCustomControlVisibility()";
0
 
LVL 1

Author Comment

by:mbosch
Comment Utility
I see what you're saying.  Is there anyway to do this with a radiobuttonlist control?  Thanks and sorry for the delay in response time.
0
 
LVL 8

Accepted Solution

by:
shovavnik earned 50 total points
Comment Utility
I too apologize for the delay.

It is possible to do with a radio button list.  You'll have to capture the OnItemCreated event of the radio button list on the server-side, and set the attribute of each radio button created, as above:

e.Item.Attributes[ "onclick" ] = "toggleCustomControlVisibility('TheNameOfTheControlThisRadioButtonToggles')";

and on the client side, you'll only have to add a little bit to the script already shown.

<script>
function toggleCustomControlVisibility( controlName ) {
  var controlToToggle = document.all[ controlName ];
  if( controlToToggle.style.display == 'block' ) controlToToggle.style.display = 'none';
  else controlToToggle.style.display = 'block';
}
</script>
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
This video discusses moving either the default database or any database to a new volume.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now