Solved

Make a user control invisible

Posted on 2007-11-26
32
2,982 Views
Last Modified: 2008-02-21
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

0
Comment
Question by:Relegence
  • 14
  • 10
  • 5
  • +1
32 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 20356230
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
 

Author Comment

by:Relegence
ID: 20356331
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356335
Are testing my code or you getting error after using my code. Can I know what have you done?
0
 

Author Comment

by:Relegence
ID: 20356355
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356382
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
 

Author Comment

by:Relegence
ID: 20356401
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356433
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
 

Author Comment

by:Relegence
ID: 20356455
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356471
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
 

Author Comment

by:Relegence
ID: 20356519
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356549
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
 

Author Comment

by:Relegence
ID: 20356598
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
 
LVL 17

Expert Comment

by:gops1
ID: 20356654
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
 
LVL 12

Assisted Solution

by:needo_jee
needo_jee earned 100 total points
ID: 20356665
The controls you have set to invisible .. ie visible=false are not rendered
you will not get those conrols in generated HTHL.
0
 

Author Comment

by:Relegence
ID: 20356682
So what do I do if i do want to change the visibility of the controls?
0
 

Author Comment

by:Relegence
ID: 20356686
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 17

Expert Comment

by:gops1
ID: 20356724
Ok did you try to execute the code I gave you? Add those lines to function checkIsRealtime
0
 

Author Comment

by:Relegence
ID: 20356783
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20356815
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
 

Author Comment

by:Relegence
ID: 20356876
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20357227
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
 

Author Comment

by:Relegence
ID: 20357281
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20357311
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
 
LVL 12

Expert Comment

by:needo_jee
ID: 20357329
try putting User control inside DIV tag and use visibility true / false  for DIV with stype property
Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20357369
What is the difference between using a div and the existing cells like I did???
0
 

Author Comment

by:Relegence
ID: 20357401
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
 
LVL 12

Expert Comment

by:needo_jee
ID: 20357446
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
 
LVL 17

Expert Comment

by:gops1
ID: 20357524
There is no id given for the <td> tag
0
 

Author Comment

by:Relegence
ID: 20357548
Using a DIV didn't help. Here, too, only the textbox was hidded and not the whole control
0
 
LVL 17

Accepted Solution

by:
gops1 earned 300 total points
ID: 20357552
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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 100 total points
ID: 20357664
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
 

Author Comment

by:Relegence
ID: 20357783
Thank you all very very much!!!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 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

14 Experts available now in Live!

Get 1:1 Help Now