Hiding and unhiding controls client side?

I am working on a web part project using C# and Visual Studio 2005.

I need to add several .Net controls (buttons, text boxes) and hide the when the web part is launched.  Then when the user clicks another (not hidden) control, I need to make the hidden controls visible using JavaScript on the client side.

If I set the visible property of a control to hidden on the server side (at compile time) the control is simply not rendered on the page.  If the control isn't rendered, you can't make it visible.

So I suspect what I need to do is somehow hide the controls on the client side when the web part is displayed and then unhide them (again on the client side) when they are needed.

Can anyone show me an example of the C# and JavaScript code required to do this?

Bob
LVL 13
bobsegrestAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erikTsomikSystem Architect, CF programmer Commented:
I just post the code which shows how to hide/show elements


<script type="text/javascript">
 
 
function toggle(val) {
      if (val == 1) {
            document.getElementById('existing_customer').style.display = 'inline';
            document.getElementById('cust_name').style.display = 'none';
			 document.getElementById('cust_surname').style.display = 'none';
            document.getElementById('cust_city').style.display = 'none';
				 document.getElementById('cust_contact').style.display = 'none';
            document.getElementById('cust_email').style.display = 'none';
			document.getElementById('cust_name2').style.display = 'none';
			document.getElementById('cust_surname2').style.display = 'none';
            document.getElementById('cust_city2').style.display = 'none';
				 document.getElementById('cust_contact2').style.display = 'none';
            document.getElementById('cust_email2').style.display = 'none';
			document.getElementById('existing_customer2').style.display = 'inline';
      }
      else if (val == 2) {
           document.getElementById('existing_customer').style.display = 'none';
            document.getElementById('cust_name').style.display = 'block';
			 document.getElementById('cust_surname').style.display = 'block';
            document.getElementById('cust_city').style.display = 'block';
				 document.getElementById('cust_contact').style.display = 'block';
            document.getElementById('cust_email').style.display = 'block';
			document.getElementById('cust_name2').style.display = 'block';
			 document.getElementById('cust_surname2').style.display = 'block';
            document.getElementById('cust_city2').style.display = 'block';
				 document.getElementById('cust_contact2').style.display = 'block';
            document.getElementById('cust_email2').style.display = 'block';
			document.getElementById('existing_customer2').style.display = 'none';
      }
}
 
 
</script>
 
 
<form name="forma" id="forma" method="POST" action="">
      <table width="550" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><b>Customer</b></td>
            <td>
                  <input name="cust_type" type="radio" id="cust_type" value="2" onClick="toggle(2)"> new 
                  <input name="cust_type" type="radio" id="cust_type2" value="1" onClick="toggle(1)"> existing
              </td>
        </tr>
        <tr>
            <td id="existing_customer2">Choose existing customer</td>
            <td>
                  <select name="existing_customer" id="existing_customer">
                        <option value="0">New customer</option>
                        <option value="1">Mateja Zavrh</option>
                        <option value="2">Miha Klamfar</option>
                        <option value="3">Goran Tratnik</option>
                        <option value="4">Mojca Maher</option>
                  </select>
            </td>
        </tr>
        <tr>
            <td id="cust_name2">Name</td>
            <td><input name="cust_name" id="cust_name" type="text"></td>
        </tr>
        <tr>
            <td id="cust_surname2">Surname</td>
            <td><input name="cust_surname" id="cust_surname"type="text"></td>
        </tr>
        <tr>
            <td id="cust_city2">City</td>
            <td><input name="cust_city" id="cust_city" type="text"></td>
        </tr>
        <tr>
            <td id="cust_contact2">Contact number</td>
            <td><input name="cust_contact" id="cust_contact" type="text"></td>
        </tr>
        <tr>
            <td id="cust_email2">Email</td>
            <td><input name="cust_email" id="cust_email"type="text"></td>
        </tr>
</form>

Open in new window

0
lunadlCommented:
well if you are using .net you need to replace all of the element names he handed you above with
myControl.ClientId if you want to hide/show myControl. It will render the client side id for you to use after the html is rendered.
something like
....document.getelementbyid('<%= textbox1.clientid %>')....... in your actual code or
string javascript ="var id = document.getElementById('"+ myControl.ClientId +"');"; in your server code.
0
monarch_ilhanCommented:
to hide a asp.net control
<asp:Textbox ID="txt" runat="server" style="display:none";>
to show it on a asp.net control click
<asp:Button ID="btn" runat="server" Text="Show" OnClientClick="document.getElementById('"+txt.ClientID+"').style.display="inline" />
or
<asp:Image ID="img" runat="server" ImageUrl="show.gif" onclick="document.getElementById('"+txt.ClientID+"').style.display="inline" />

to do programmatically
//assume you have an image control on your form named img
img.Attributes.Add("onclick","document.getElementById('"+txt.ClientID+"').style.display="inline");
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

bobsegrestAuthor Commented:
First, let me thank each of you for your proposed solutions.  I have learned a lot from them, but I'm not where I need to be yet.

The solution proposed by erikTsomik is interesting.  The controls in his example do indeed disappear and reappear on command.  The concern that I have with this approach is that the example does not use asp.net controls and I'm not yet sure how I can push the data they collect client side back to the server (read the input from my C# code behind application code.  I also need to have the controls hidden on startup and I haven't figured how to make this happen yet.  If you can get me through these two knot holes, my problem is solved.

The second two solutions proposed by lunadl and monarch_ilhan both address my perceived need to use asp.net controls.  However web part development requires me to develop using a code behind model.  Each control has to be created in the web parts CreateChildControls method and then rendered in the web parts RenderWebPart method.  This is because a web part is first and foremost a "part" of a page generated dynamically at some point in the future.  If you can show me how to do implement your solution in a something like the following, I will be happy to pursue this avenue further.

                Control webControl;
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);

Bob
0
monarch_ilhanCommented:
Control webControl;
               Textbox txt=new TextBox();
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
             cmdTest.Attributes.Add("onclick","document.getElementById('"+txt.ClientID+"').style.display="inline"); //Add on client side click function. instead of javascript code, you can give the javascript function directly

or

cmdTest.Style.Add(HtmlTextWriterStyle.Display,"none"); // hides control with css style settings

                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);
0
bobsegrestAuthor Commented:

Hello monarch_ilhan,

With a little tweaking (see below) your last sample seems to hide and unhide the textbox.

                Control webControl;
                txt = new System.Web.UI.WebControls.TextBox();
                txt.Text = "Enter you response here";
                txt.Width = 100;
                txt.Style.Add(HtmlTextWriterStyle.Display, "block");
                txt.ID = "txtBox";

                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                cmdTest.Attributes.Add("onclick","document.getElementById('txtBox').style.display='none'");
                webControl = cmdTest;
                Controls.Add(webControl);

However, there three points to resolve.

1. When the cmdTest button is clicked the inline javascript hides the textbox.  But then it does a postback to the server.  I think I can prevent this by adding a return false statement to the end of the inline javascript.  However, this may not be an issue.

2. When the postback described in point 1 occurs, the text value of the textbox is not being returned to the server.  If I add the textbox to my controls collection as a WebControl, the text value is returned to the server.  However... Making the textbox a WebControl also prevents it from being hidden.

3. In the end I need to be able to unhide my controls using a javascript function.  This is because the control that starts this whole process is client side javascript.

Any more ideas?

Bob

0
bobsegrestAuthor Commented:
Hello All,

I managed to figure out that the if  the 'visibility' attribute for a webcontrol is set to either 'show' or 'hidden' I can manipulate the controls as needed.

Now all I have to do is figure out how to find a webcontrol from javascript so that I can set the attribute.

The following line doesn't seem to work...

     document.getElementById('txtBox').style.visibility = 'show';

I also tried using the getElementsByName method with the same result.  

Any ideas?

Bob
0
monarch_ilhanCommented:
use ClientID property of textbox.
document.getElementById('<% #txtBox.ClientID%>').style.visibility = 'show';
Look the source of rendered page, and find the correct id of invisible control. probably, since it is a child control of a control, it took the parent control name as prefix (like Control1_txtBox)
0
bobsegrestAuthor Commented:
Hello monarch_ilhan,

I have been playing with this for the last couple hours and it isn't working.  Let me elaborate a bit.  Here is where I declare the javascript function:

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('<% #txt.ClientID>').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

If I remove the document line I see the alert box pop up with out any difficulty.  When I run the function as shown, I get a an "Error On Page" warning at the bottom of my web part page and do not see the alert.

If I look at the source for the page, I can find the txtBox control is defined as follows:

<input name="ctl00$m$g_001b6c67_13a0_42b5_8114_c10a29de95b7$txtBox" type="text" id="ctl00_m_g_001b6c67_13a0_42b5_8114_c10a29de95b7_txtBox" style="width:300px;visibility:hidden;" />

I can also see that the javascript function I have listed above is included literally and has not been expanded to reflect the id of the control.

Bob
0
bobsegrestAuthor Commented:
Hello monarch_ilhan,

Well I finally got it all worked out.  The problem was that the <% %> directive will not work in with a child webcontrol in a webpart.  However I was able to resolve the problem by by referencing the ClientID in my JavaScript function before I embedded it into the webpart with a call to RegisterClientScriptBlock.

Thank you for your help.

Bob
0
monarch_ilhanCommented:
Hi Bob,
Sory I couldnt reply to your last comment but you did by yourself :)
You welcome. Knowledge grows as we shared
0
jerrygbCommented:
Small mistake Bob, probably a typo,

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('" +txt.ClientID +"').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

txt.ClientID should be rendered at server and since you're registering a javascript through a function perhaps, it needs to be unquoted.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.