Solved

making user controls visible/invisible using javascript

Posted on 2004-08-23
3
245 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

776 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