Solved

making user controls visible/invisible using javascript

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP.NET e-commerce website 4 55
SSRS ReportViewer report timeout 7 99
Server Error 11 47
Split in Javascript 5 30
Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…
A company’s greatest vulnerability is their email. CEO fraud, ransomware and spear phishing attacks are the no1 threat to a company’s security. Cybercrime is responsible for the largest loss of money to companies today with losses projected to r…

932 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

15 Experts available now in Live!

Get 1:1 Help Now