Solved

making user controls visible/invisible using javascript

Posted on 2004-08-23
3
246 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
ID: 11874496
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
ID: 11942633
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
ID: 11988338
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.

856 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