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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
gops1Connect With a Mentor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 HussainConnect With a Mentor Principal 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 PlungjanConnect With a Mentor IT 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
All Courses

From novice to tech pro — start learning today.