Make a user control invisible

Hello,
I have written a user control that contains a textbox and 2 images ('up' and 'down' arrows).
I have a web page where I am using 3 of these controls ('hours', 'minutes' and 'seconds').
In some cases I want to make the 'seconds' control invisible, and then visible again (when checking or unchecking a checkbox).

In the code snippet you can see what I tried to do.

When the page is first loaded, the 'seconds' control is invisible.
The error is when first chechking the checkbox. the javascript 'checkIsRealtime()' is called and in the function I get an "Object Required" error wen trying to reference the 'seconds' control.

How can I fix that and change the visibility of my user control?

Thank you


The ascx control
-----------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="updown.ascx.cs" Inherits="updown" %>
<table cellpadding="0" cellspacing="0" border="0" style="position:relative;top:11px;">
    <tr>
        <td>
            <input type="text" id="txtUpDown" runat="server" onclick="clearText(this.id)" size="1" maxlength="2"/>
            <table border="0" cellpadding="0" cellspacing="2" style="position:relative;left:24px;top:-26px;">
                <tr height="3px">
                    <td>
                        <img src="../images/arrUp.gif" onclick="javascript:increment('<%= txtUpDown.ClientID %>', <%=MaxVal%>)"/>
                    </td>
                </tr>
                <tr height="3px">
                    <td>
                        <img src="../images/arrDown.gif" onclick="javascript:decrement('<%= txtUpDown.ClientID %>', <%=MinVal%>)"/>
                    </td>
                </tr>
            </table>
        </td>
      
    </tr>
</table>
 
---------------------------------------------------
the web page's aspx, where I am using the control:
--------------------
<td>
											    <table border="0" cellpadding="0" cellspacing="0" style="position:relative;top:6px;">
											        <tr>
											            <td>
											                <controls:UpDownControl ID="txtHour" runat="server" UpDownText="HH" UpDownMaxValue="23"  UpDownMinValue="0"/>        
											            </td>
											            <td>
											                <controls:UpDownControl ID="txtMinute" runat="server" UpDownText="MM" UpDownMaxValue="59"  UpDownMinValue="0"/>        
											            </td>
											            <td>
											                <controls:UpDownControl ID="txtSecond" runat="server" UpDownText="SS" UpDownMaxValue="59"  UpDownMinValue="0" Visible="false"/>        
											            </td>
											        </tr>
											    </table>
											</td>
											<td>
										        <asp:CheckBox ID="cbkRT" runat="server" Text="Is Realtime" onclick="javascript:checkIsRealtime()" />&nbsp;
										    </td>
 
the javascript in which I'm trying to change the visibility of the controls:
------------
function checkIsRealtime()
            {
                if(document.all("cbkRT").checked)
                {
                    document.getElementById("txtHour_txtUpDown").style.visibility = "hidden";
                    document.getElementById("txtMinute_txtUpDown").style.visibility = "hidden";
                    document.getElementById("txtSecond_txtUpDown").style.visibility = "visible";
                }
                else
                {
                    document.getElementById("txtHour_txtUpDown").style.visibility = "visible";
                    document.getElementById("txtMinute_txtUpDown").style.visibility = "visible";
                    document.getElementById("txtSecond_txtUpDown").style.visibility = "hidden";
                }
            }

Open in new window

RelegenceAsked:
Who is Participating?
 
gops1Commented:
if you are still going with the text box id then make your function like this:
function checkIsRealtime(chk){
	var isRealTime = chk.checked
	document.getElementById("txtHour_txtUpDown").parentNode.style.visibility = (isRealTime)?"hidden":"visible";
	document.getElementById("txtMinute_txtUpDown").parentNode.style.visibility = (isRealTime)?"hidden":"visible";
	document.getElementById("txtSecond_txtUpDown").parentNode.style.visibility = (isRealTime)?"visible":"hidden";
}

Open in new window

0
 
gops1Commented:
Do not use document.all it becomes specific to IE browser.: Here is something for you, try this out.
<html>
	<head>
		<title>Script Demo Gops</title>
		<script type="text/javascript">
			function checkIsRealtime(o){
				if(o.checked){
					document.getElementById("txtHour_txtUpDown").style.visibility = "hidden";
					document.getElementById("txtMinute_txtUpDown").style.visibility = "hidden";
					document.getElementById("txtSecond_txtUpDown").style.visibility = "visible";
				}else{
					document.getElementById("txtHour_txtUpDown").style.visibility = "visible";
					document.getElementById("txtMinute_txtUpDown").style.visibility = "visible";
					document.getElementById("txtSecond_txtUpDown").style.visibility = "hidden";
				}
			}
		</script>
	</head>
<body>
	<span id="txtHour_txtUpDown">10</span><span id="txtMinute_txtUpDown">:25</span><span id="txtSecond_txtUpDown">:60</span>
	<br>
	<input type="checkbox" value="" id="seconds" onclick="checkIsRealtime(this)">Seconds?
</body>
</html>

Open in new window

0
 
RelegenceAuthor Commented:
Thank you but unfortunately, I get the same error when trying to change the seconds' visibility - "Object Required".
It is strange because it seems that because the page is loaded with the hours and minutes only and the seconds is invisible then later on it doesn't even exist...
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
gops1Commented:
Are testing my code or you getting error after using my code. Can I know what have you done?
0
 
RelegenceAuthor Commented:
I've tried to integrate your code in my code. I have replaced the checkbox server control with the html control and changed the function, according to your code.

Maybe the difference is that you are using spans and I am using ascx controls..
0
 
gops1Commented:
But it should work if they are given the same IDs. Can I see the html source of your hour, minutes and seconds tags?
0
 
RelegenceAuthor Commented:
Here it is the html code and then the ascx code
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;top:6px;">
											        <tr>
											            <td>
											                <controls:UpDownControl ID="txtHour" runat="server" UpDownText="HH" UpDownMaxValue="23"  UpDownMinValue="0"/>        
											            </td>
											            <td>
											                <controls:UpDownControl ID="txtMinute" runat="server" UpDownText="MM" UpDownMaxValue="59"  UpDownMinValue="0"/>        
											            </td>
											            <td>
											                <controls:UpDownControl ID="txtSecond" runat="server" UpDownText="SS" UpDownMaxValue="59"  UpDownMinValue="0" Visible="false"/>        
											            </td>
											        </tr>
											    </table>
 
and this is the ASCX code:
---------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="updown.ascx.cs" Inherits="updown" %>
<table cellpadding="0" cellspacing="0" border="0" style="position:relative;top:11px;">
    <tr>
        <td>
            <input type="text" id="txtUpDown" runat="server" onclick="clearText(this.id)" size="1" maxlength="2"/>
            <table border="0" cellpadding="0" cellspacing="2" style="position:relative;left:24px;top:-26px;">
                <tr height="3px">
                    <td>
                        <img src="../images/arrUp.gif" onclick="javascript:increment('<%= txtUpDown.ClientID %>', <%=MaxVal%>)"/>
                    </td>
                </tr>
                <tr height="3px">
                    <td>
                        <img src="../images/arrDown.gif" onclick="javascript:decrement('<%= txtUpDown.ClientID %>', <%=MinVal%>)"/>
                    </td>
                </tr>
            </table>
        </td>
      
    </tr>
</table>

Open in new window

0
 
gops1Commented:
I guess the IDs provided in your function is incorrect. Why are you suffixing "_txtUpDown" with in your javascript. Try replacing your javascript with this:


			function checkIsRealtime(o){
				if(o.checked){
					document.getElementById("txtHour").style.visibility = "hidden";
					document.getElementById("txtMinute").style.visibility = "hidden";
					document.getElementById("txtSecond").style.visibility = "visible";
				}else{
					document.getElementById("txtHour").style.visibility = "visible";
					document.getElementById("txtMinute").style.visibility = "visible";
					document.getElementById("txtSecond").style.visibility = "hidden";
				}
			}

Open in new window

0
 
RelegenceAuthor Commented:
That way I get the "Object Required" error for all 3 controls.
I guess that since they are user controls, the suffix "_txtUpDown" is added automatically.

When I look at the page's source on run time this is what I see where I put the hours user control, for example:
<table cellpadding="0" cellspacing="0" border="0" style="position:relative;top:11px;">
    <tr>
        <td>
            <input name="txtHour$txtUpDown" type="text" id="txtHour_txtUpDown" onclick="clearText(this.id)" size="1" maxlength="2" value="HH" />
            <table border="0" cellpadding="0" cellspacing="2" style="position:relative;left:24px;top:-26px;">
                <tr height="3px">
                    <td>
                        <img src="../images/arrUp.gif" onclick="javascript:increment('txtHour_txtUpDown', 23)"/>
                    </td>
                </tr>
                <tr height="3px">
                    <td>
                        <img src="../images/arrDown.gif" onclick="javascript:decrement('txtHour_txtUpDown', 0)"/>
                    </td>
                </tr>
            </table>
        </td>
     
    </tr>
</table>
0
 
gops1Commented:
Can you show me the page source of this code:

      <table border="0" cellpadding="0" cellspacing="0" style="position:relative;top:6px;">
            <tr>
                  <td>
                  <controls:UpDownControl ID="txtHour" runat="server" UpDownText="HH" UpDownMaxValue="23"  UpDownMinValue="0"/>
                  </td>
            <td>
                  <controls:UpDownControl ID="txtMinute" runat="server" UpDownText="MM" UpDownMaxValue="59"  UpDownMinValue="0"/>
            </td>
            <td>
                  <controls:UpDownControl ID="txtSecond" runat="server" UpDownText="SS" UpDownMaxValue="59"  UpDownMinValue="0" Visible="false"/>
            </td>
            </tr>
      </table>
0
 
RelegenceAuthor Commented:
I wrote a user control 'updown.ascx' and added it to my project and then added the following row to every page using the control:
<%@ Register Tagprefix="controls" Tagname="UpDownControl" Src="../updown.ascx" %>

Following is my code. I hope this is what you meant..
This is the controls code:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="updown.ascx.cs" Inherits="updown" %>
<table cellpadding="0" cellspacing="0" border="0" style="position:relative;top:11px;">
    <tr>
        <td>
            <input type="text" id="txtUpDown" runat="server" onclick="clearText(this.id)" size="1" maxlength="2"/>
            <table border="0" cellpadding="0" cellspacing="2" style="position:relative;left:24px;top:-26px;">
                <tr height="3px">
                    <td>
                        <img src="../images/arrUp.gif" onclick="javascript:increment('<%= txtUpDown.ClientID %>', <%=MaxVal%>)"/>
                    </td>
                </tr>
                <tr height="3px">
                    <td>
                        <img src="../images/arrDown.gif" onclick="javascript:decrement('<%= txtUpDown.ClientID %>', <%=MinVal%>)"/>
                    </td>
                </tr>
            </table>
        </td>
      
    </tr>
</table>
 
and this is the code behind:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class updown : System.Web.UI.UserControl
{
    protected int MaxVal = 0;
    protected int MinVal = 0;
 
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
 
    public string UpDownText
    {
        get
        {
            return txtUpDown.Value;
        }
        set
        {
            txtUpDown.Value = value;
        }
    }
 
    public int UpDownMaxValue
    {
        get
        {
            return this.MaxVal;
        }
        set
        {
            this.MaxVal = value;
        }
    }
 
    public int UpDownMinValue
    {
        get
        {
            return this.MinVal;
        }
        set
        {
            this.MinVal = value;
        }
    }
    
}

Open in new window

0
 
gops1Commented:
Ok now what I understand is, the piece of code that I have pasted in my comment is stored under "updown.ascx". Correct me if I am wrong.

And show/hide is for controls that is available inside updown.ascx. If am understanding right, what I want to know is, dont you see the page source for "updown.ascx". If you can see could you please show me that?
0
 
RelegenceAuthor Commented:
I am not sure if I understand what you meant but I'll try to explain.
The situation is this: I have the ASCX control and the ASPX page.
The ASPX page is using the ASCX control 3 times (for hours, minutes and seconds).

When running the application I can only see the source of the ASPX file. I can't see the source of the ASCX.
BUT, the ASCX code is integrated in the ASPX, actually 3 times, for each of the times I used the controls.
There, It gives it an ID, with the suffix "_txtUpDown".

I hope this is what you needed.
0
 
gops1Commented:
Sorry I do not understand ASP. Ok now  you cannot see the page source of ASCX then how do you know that it has  suffixed "_txtUpDown".

Please add this to your function. This is just to test if the object is existing or not:

if(document.getElementById("txtHour_txtUpDown")){
         alert('Object Exist');
}else{
         alert('Object does Not Exist');
}

Add these statments to the beginig of your function
0
 
Munawar HussainPrincipal Software EngineerCommented:
The controls you have set to invisible .. ie visible=false are not rendered
you will not get those conrols in generated HTHL.
0
 
RelegenceAuthor Commented:
So what do I do if i do want to change the visibility of the controls?
0
 
RelegenceAuthor Commented:
gops1 - I know that the suffix is "_txtUpDown" from wathching the ASPX code behind...
From what "needo jee" just wrote I won't be able to see them because when they are invisible they are not rendered
0
 
gops1Commented:
Ok did you try to execute the code I gave you? Add those lines to function checkIsRealtime
0
 
RelegenceAuthor Commented:
I get 'Object Exist' for the hours and minutes but not for the seconds, because it was initially set as invisible so it is not rendered
0
 
Michel PlungjanIT ExpertCommented:
So instead do this:

<style>
#txtSecond { visibility:hidden }
</style>


 <controls:UpDownControl ID="txtSecond" runat="server" UpDownText="SS" UpDownMaxValue="59"  UpDownMinValue="0" />

now it will work assuming the ID is correct
0
 
RelegenceAuthor Commented:
This is much better now.
The only problem left is that only the textbox becomes invisible.
The 2 images that belong to the control stay.

I want to hide the whole control (which contains a textbox and 2 images)
0
 
Michel PlungjanIT ExpertCommented:
Like this:
<style>
.hour { visibility:visible }
.min { visibility:visible }
.sec { visibility:hidden }
 
</style>
 
<table border="0" cellpadding="0" cellspacing="0" style="position:relative;top:6px;">
<tr>
  <td id="hour">
    <controls:UpDownControl ID="txtHour" runat="server" UpDownText="HH" UpDownMaxValue="23"  UpDownMinValue="0"/>        
  </td>
  <td id="min">
     <controls:UpDownControl ID="txtMinute" runat="server" UpDownText="MM" UpDownMaxValue="59"  UpDownMinValue="0"/>        
  </td>
  <td id="sec">
    <controls:UpDownControl ID="txtSecond" runat="server" UpDownText="SS" UpDownMaxValue="59"  UpDownMinValue="0" />        
  </td>
</tr>
</table>
 
<asp:CheckBox ID="cbkRT" runat="server" Text="Is Realtime" onclick="checkIsRealtime(this)" />&nbsp;
 
using
 
function checkIsRealtime(chk){
  var isRealTime = chk.checked
  document.getElementById("hour").style.visibility = (isRealTime)?"hidden":"visible";
  document.getElementById("min").style.visibility = (isRealTime)?"hidden":"visible";
  document.getElementById("sec").style.visibility = (isRealTime)?"visible":"hidden";
}

Open in new window

0
 
RelegenceAuthor Commented:
Thank you very much.
There is just 1 more problem, as I described above - Only the textbox becomes invisible and not the whole control (textbox and the 2 images)
I want to make the whole control invisible
0
 
Michel PlungjanIT ExpertCommented:
I am sorry I have no idea what you mean.

If you make a cell invisible, then everything in that cell should become invisible

Please copy and paste the actual html produced in your browser of the controls from the
<table>
<tr>
<td id="hours"
.
.
.
</table>
0
 
Munawar HussainPrincipal Software EngineerCommented:
try putting User control inside DIV tag and use visibility true / false  for DIV with stype property
Thanks
0
 
Michel PlungjanIT ExpertCommented:
What is the difference between using a div and the existing cells like I did???
0
 
RelegenceAuthor Commented:
Here is the html produced for the "Hours" control, for example:
 <tr>
        <td>
            <input name="txtHour$txtUpDown" type="text" id="txtHour_txtUpDown" onclick="clearText(this.id)" size="1" maxlength="2" value="HH" />
            <table border="0" cellpadding="0" cellspacing="2" style="position:relative;left:24px;top:-26px;">
                <tr height="3px">
                    <td>
                        <img src="../images/arrUp.gif" onclick="javascript:increment('txtHour_txtUpDown', 23)"/>
                    </td>
                </tr>
                <tr height="3px">
                    <td>
                        <img src="../images/arrDown.gif" onclick="javascript:decrement('txtHour_txtUpDown', 0)"/>
                    </td>
                </tr>
            </table>
        </td>
     
    </tr>

When I make it invisible then only the textbox is invisible but the 2 images still appear.
I wan't them to be invisible as well.

I thought that when making the control invisible then all of it is invisible
0
 
Munawar HussainPrincipal Software EngineerCommented:
Div is container which provide you facility to hide and show blocks , like table or muliple tables or controls . you may hide with the help of container DIV
0
 
gops1Commented:
There is no id given for the <td> tag
0
 
RelegenceAuthor Commented:
Using a DIV didn't help. Here, too, only the textbox was hidded and not the whole control
0
 
Michel PlungjanIT ExpertCommented:
But you wrap the control in a table  too, no???

<table border="0" cellpadding="0" cellspacing="0" style="position:relative;top:6px;">
<tr>
  <td id="hour"> <<<<<<<< I hide THIS
    <controls:UpDownControl ID="txtHour" runat="server" UpDownText="HH" UpDownMaxValue="23"  UpDownMinValue="0"/>        
  </td>
0
 
RelegenceAuthor Commented:
Thank you all very very much!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.