• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 635
  • Last Modified:

Hidding a calender control on focus of a textBox

I have two textBoxes and two calender control I have an calander image button to makes the calender control to be visible.

My Problem is:

If calender 1 that is linked to TextBox1 and  is open and if the user wishes to click into textbox2, then I should hide all Calender controls (either calender1 or calender2) .

How can I do it?
0
DGSTech
Asked:
DGSTech
  • 7
  • 4
2 Solutions
 
Juan_BarreraCommented:
HI there,

There is an easy way of doing this by using the Calendar Extender of the AjaxControlToolkit:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx
0
 
kssoftwareCommented:
You could use javascript to handle it.  Some sample code here assumes that your textboxes have IDs of "txtCal1" and "txtCal2" and the calendar controls are located inside a <div> element.  You add an onfocus attribute in the page_load method that simply hides the divs containing the calendar controls.

Chris

<!-- .aspx page:-->
 
<script type="text/javascript">
    function toggle(sdivid) {
        var e = document.getElementById(sdivid);
        var cur = e.style.display;
        var nw = 'block';
        if (cur == 'block') {
            nw = 'none';
        }
        e.style.display = nw;
    }
</script>
 
    <asp:TextBox ID="txtCal1" runat="server"></asp:TextBox><img src="/images/calendar.gif"
        onclick="toggle('divcal1')" alt="Calendar" />
    <div id="divcal1" style="display: none">
        <asp:Calendar ID="cal1" runat="server"></asp:Calendar>
    </div>
    <br />
    <asp:TextBox ID="txtCal2" runat="server"></asp:TextBox><img src="/images/calendar.gif"
        onclick="toggle('divcal2')" alt="Calendar" />
    <div id="divcal2" style="display: none">
        <asp:Calendar ID="cal2" runat="server"></asp:Calendar>
    </div>
<!-- and your code behind: -->
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        txtCal1.Attributes.Add("onfocus", "divcal1.style.display='none';divcal2.style.display='none'")
        txtCal2.Attributes.Add("onfocus", "divcal1.style.display='none';divcal2.style.display='none'")
end sub

Open in new window

0
 
DGSTechAuthor Commented:
Thanks folks for your reply.

Juan, sorry I cannont accept your solution as I cannot use AJAX in my current environment.

Chris,

The calender controls are inside a table <td> tags. I am going to try using the td tag ids instead of div tag ids and test it. Let you know as soon as it is done.

rs.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
DGSTechAuthor Commented:
Chris,

I added a div tag with the similar ids and ran the code; i get the following error:

*****************************************************************************************************************************

Compiler Error Message: BC30456: 'toggle' is not a member of 'ASP.list_aspx'.

Source Error:

 

Line 55:        <td style="width: 298px; height: 46px"> <asp:Label ID="lblStartDate" runat="server" Font-Bold="True" Text="Start Date"></asp:Label>
Line 56:            <asp:TextBox ID="TextBox1" runat="server" Width="131px" Height="18px" AutoPostBack="True" ></asp:TextBox>&nbsp;
Line 57:            <asp:ImageButton ID="ImageButton1" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF" Style="position: relative; top: 3px" Width="31px" OnClick="toggle('divcall')" />
Line 58:         <br />
Line 59:         <asp:Label ID="lblEndDate" runat="server" Font-Bold="True" Text="End Date" style="left: 0px; position: relative; top: 0px"></asp:Label>&nbsp;&nbsp;
 

Source File:..List.aspx    Line: 57
*****************************************************************************************************************************

I added the javascript inside the body of my form (form1).

thanks,

rs
0
 
DGSTechAuthor Commented:
Can I have a following javascript anywhere within the aspx page or should i necessarily be only in the header text? -- I currently have it just above the textbox definition within the body tag.

           
 <script type="text/javascript" >
    function toggle(sdivid)
    {
        var e = document.getElementById(sdivid);
        var cur = e.style.display;
        var nw = 'block';
        if (cur == 'block')
        {
            nw = 'none';
        }
        e.style.display = nw;
    }  
 </script>
0
 
DGSTechAuthor Commented:
Chris,

In the above javascript when i run it, it keeps on flickering but not displaying at all.

Here is the javascript that I made it work.

 function display()
    {
    var obj = document.getElementById("divcall");
    var obj1 = document.getElementById("divcal2");
    if (obj.style.display == 'none')
    {
        obj.style.display = '';
    }
    else{  obj.style.display = 'none'; }
    if (obj1.style.display == 'none')
    {
        obj1.style.display = '';
    }
    else{obj1.style.display = 'none'}
    }
0
 
kssoftwareCommented:
Hi Juan
The reason you get the error "Compiler Error Message: BC30456: 'toggle' is not a member of 'ASP.list_aspx'." is because you are using "OnClick" an event that is a server-side piece of code.  You need to change your "OnClick" to "OnClientClick" - then it will execute it as javascript.  Also, to stop the image button submitting the form, change the code to read as in the snippet.  Note that the "return" value of the javascript is "false" - this stops the button from submitting the form (that's why it's flickering - the javascript gets executed and then the form gets submitted). And in your "display" function, if you want to use that, you need to change the element id to be "divcal1" not "divcall" as in your code snippet.  Using <td> elements will work just as fine as the <div> elements.
And yes, you can put the javascript anywhere in the page, but I usually prefer to put it in between the <head></head> tags.
Hope this helps

<td style="width: 298px; height: 46px"> <asp:Label ID="lblStartDate" runat="server" Font-Bold="True" Text="Start Date"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Width="131px" Height="18px" AutoPostBack="True" ></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF" Style="position: relative; top: 3px" Width="31px" OnClientClick="return(toggle('divcal1'))" />
<br />
<asp:Label ID="lblEndDate" runat="server" Font-Bold="True" Text="End Date" style="left: 0px; position: relative; top: 0px"></asp:Label>
 
<script type="text/javascript" >
    function toggle(sdivid) 
    {
        var e = document.getElementById(sdivid);
        var cur = e.style.display;
        var nw = 'block';
        if (cur == 'block') 
        {
            nw = 'none';
        }
        e.style.display = nw;
        return(false)
    }  
 </script>

Open in new window

0
 
DGSTechAuthor Commented:
Hi Chris,

My javascript within <head> tag is as follows:

  function toggle(sdivid)
     {
        var e = document.getElementById(sdivid);
        var cur = e.style.display;
        var nw = 'block';
        if (cur == 'block')
        {
            nw = 'none';
        }
        e.style.display = nw;
        return(false)
    }  
******************************************************************************************************************************
my aspx page has the following:

<td style="width: 385px; height: 46px"> <asp:Label ID="lblStartDate" runat="server" Font-Bold="True" Text="Start Date"></asp:Label>
           <asp:TextBox ID="TextBox1" runat="server" Width="131px" Height="18px" AutoPostBack="True" ></asp:TextBox>&nbsp;
           <asp:ImageButton ID="ImageButton1" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF" Style="position: relative; top: 3px" Width="31px" OnClientClick="return(toggle('divcall'))"  /><br />
                   <asp:Label ID="lblEndDate" runat="server" Font-Bold="True" Text="End Date" style="left: 0px; position: relative; top: 0px"></asp:Label>&nbsp;&nbsp;
        <asp:TextBox ID="TextBox2" runat="server" Width="131px" Height="18px" AutoPostBack="True"  ></asp:TextBox>&nbsp;
           <asp:ImageButton ID="ImageButton2" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF" Style="left: 0px; position: relative; top: 6px" ToolTip="Select an End Date"  Width="31px" OnClientClick="return(toggle('divcal2'))"  />&nbsp;<br />
           &nbsp;</td><td style="width: 299px; height: 46px"><div id="divcall" style="display:none" ><asp:Calendar ID="Cld_StartDate" runat="server" BackColor="White"
            BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest"
            Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="16px" Width="200px">
            <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
            <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
            <WeekendDayStyle BackColor="#CCCCFF" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
            <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
            <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
                Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
        </asp:Calendar>
               &nbsp;</div><div id="divcal2" style="display:none"><asp:Calendar ID="Cld_EndDate" runat="server" BackColor="White"
            BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest"
            Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="90px" Width="200px">
            <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
            <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
            <WeekendDayStyle BackColor="#CCCCFF" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
            <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
            <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
                Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
        </asp:Calendar>
            &nbsp;</div>
               &nbsp;
           </td>
*****************************************************************************************************************************
My code behind has the following code:
TextBox1.Attributes.Add("onfocus", "divcall.style.display='none';divcal2.style.display='none'")TextBox2.Attributes.Add("onfocus", "divcall.style.display='none';divcal2.style.display='none'")
*****************************************************************************************************************************
Now when i click on the imagebutton the calander control is not displaying.

what should i do now?

thanks,
Rs


0
 
kssoftwareCommented:
Hi Rs
When I paste your code, all works just fine.  I have attached my entire aspx file - can you try this and let me know how it goes.
<%@ Page Title="" Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb"
    Inherits="Default2" %>
 
<html>
<head runat="server" id="head1">
 
    <script type="text/javascript">
        function toggle2(sdivid) {
            var e = document.getElementById(sdivid);
            var cur = e.style.display;
            var nw = 'block';
            if (cur == 'block') {
                nw = 'none';
            }
            e.style.display = nw;
            return (false)
        }
        function toggle(sdivid) {
            var e = document.getElementById(sdivid);
            var cur = e.style.display;
            var nw = 'block';
            if (cur == 'block') {
                nw = 'none';
            }
            e.style.display = nw;
            return (false)
        }  
 
    </script>
 
</head>
<body>
    <form runat="server" id="frmmain">
    <table>
        <tr>
            <td style="width: 385px; height: 46px">
                <asp:Label ID="lblStartDate" runat="server" Font-Bold="True" Text="Start Date"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server" Width="131px" Height="18px" AutoPostBack="True"></asp:TextBox>&nbsp;
                <asp:ImageButton ID="ImageButton1" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF"
                    Style="position: relative; top: 3px" Width="31px" OnClientClick="return(toggle('divcall'))" /><br />
                <asp:Label ID="lblEndDate" runat="server" Font-Bold="True" Text="End Date" Style="left: 0px;
                    position: relative; top: 0px"></asp:Label>&nbsp;&nbsp;
                <asp:TextBox ID="TextBox2" runat="server" Width="131px" Height="18px" AutoPostBack="True"></asp:TextBox>&nbsp;
                <asp:ImageButton ID="ImageButton2" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF"
                    Style="left: 0px; position: relative; top: 6px" ToolTip="Select an End Date"
                    Width="31px" OnClientClick="return(toggle('divcal2'))" />&nbsp;<br />
                &nbsp;
            </td>
            <td style="width: 299px; height: 46px">
                <div id="divcall" style="display: none">
                    <asp:Calendar ID="Cld_StartDate" runat="server" BackColor="White" BorderColor="#3366CC"
                        BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
                        Font-Size="8pt" ForeColor="#003399" Height="16px" Width="200px">
                        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
                        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                        <WeekendDayStyle BackColor="#CCCCFF" />
                        <OtherMonthDayStyle ForeColor="#999999" />
                        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                        <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                        <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
                            Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
                    </asp:Calendar>
                    &nbsp;</div>
                <div id="divcal2" style="display: none">
                    <asp:Calendar ID="Cld_EndDate" runat="server" BackColor="White" BorderColor="#3366CC"
                        BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
                        Font-Size="8pt" ForeColor="#003399" Height="90px" Width="200px">
                        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
                        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                        <WeekendDayStyle BackColor="#CCCCFF" />
                        <OtherMonthDayStyle ForeColor="#999999" />
                        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                        <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                        <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
                            Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
                    </asp:Calendar>
                    &nbsp;</div>
                &nbsp;
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
======================================
and code behind:
Option Explicit On
Option Strict On
 
 
Partial Class Default2
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        TextBox1.Attributes.Add("onfocus", "divcall.style.display='none';divcal2.style.display='none'")
        TextBox2.Attributes.Add("onfocus", "divcall.style.display='none';divcal2.style.display='none'")
    End Sub
 
End Class

Open in new window

0
 
DGSTechAuthor Commented:
Hi,
when i clicked on the image button, the calender control do not pop up for either of the buttons.

I also added couple of arrow.gif (image1 and image2) through the following code and made it work.
But now my problem is if i click on the other text box (for eg. when cld2 is open i clicked on txt1 or vice versa), the image button and the image icon moves to the bottom line. I am rendering it in IE6.

Here is the code:
****************************************************
JAVASCRIPT
*************************************************
 <script type="text/javascript" language="javascript"  >
    function display()
    {
    try
    {
        var obj = document.getElementById("divcall");          
        if (obj.style.display == 'none')
        {
            obj.style.display = 'block';
            document.getElementById('<%=Image1.clientID %>').style.display='block';
         }
        else{  
                obj.style.display = 'none';
                document.getElementById('<%=Image1.clientID %>').style.display='none';
            }  
     }
     catch(err){}
    }
    function display2()
    {
    try
    {
        var obj1 = document.getElementById("divcal2");
        if (obj1.style.display == 'none')
        {
            obj1.style.display = 'block';
            document.getElementById('<%=Image2.clientID %>').style.display='block';
            }
        else{
                obj1.style.display = 'none';
                document.getElementById('<%=Image2.clientID %>').style.display='none';
            }
     }
     catch(er){}
    }
***********************************
    default.aspx
**********************************
 <td style="width: 396px; height: 23px">
        <asp:Label ID="lblStartDate" runat="server" Font-Bold="True" Text="Start Date"></asp:Label><asp:TextBox ID="TextBox1" runat="server" Width="131px" Height="18px" AutoPostBack="True" ></asp:TextBox><asp:Image ID="Image1" runat="server" ImageUrl="~/Image/arrow_next.gif" style="position: static;" Height="16px" Width="19px"  />
           <asp:ImageButton ID="ImageButton1" runat="server" Height="28px" ImageUrl="..\Image\calender.GIF" Style="position: static;" Width="31px"/><br />
                   <asp:Label ID="lblEndDate" runat="server" Font-Bold="True" Text="End Date" style="left: 6px; position: relative; top: 0px"></asp:Label>&nbsp;
        <asp:TextBox ID="TextBox2" runat="server" Width="131px" Height="18px" AutoPostBack="True" ></asp:TextBox><asp:Image ID="Image2" runat="server" ImageUrl="~/Image/arrow_next.gif" style="position: static;" />
           <asp:ImageButton ID="ImageButton2" runat="server" Height="28px" ImageUrl="..Image\calender.GIF" Style="position: static;" ToolTip="Select an End Date"  Width="31px" /></td><td style="width: 371px; height: 23px">&nbsp; <div id="divcall" > <asp:Calendar ID="Cld_StartDate" runat="server" BackColor="White"
            BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest"
            Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="16px" Width="200px">
            <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
            <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
            <WeekendDayStyle BackColor="#CCCCFF" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
            <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
            <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
        </asp:Calendar></div><div id="divcal2" >
               <asp:Calendar ID="Cld_EndDate" runat="server" BackColor="White"
            BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest"
            Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="90px" Width="200px">
            <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
            <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
            <WeekendDayStyle BackColor="#CCCCFF" />
            <OtherMonthDayStyle ForeColor="#999999" />
            <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
            <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
            <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
        </asp:Calendar>
               &nbsp;&nbsp;</div></td>
    </tr>
   </table>
**********************************************************************
CODE-BEHIND
**********************************************************************
  TextBox1.Attributes.Add("onfocus", "display();")
  TextBox2.Attributes.Add("onfocus", "display2();")

This works, but as i said earlier, when i click on the other textbox, the image button and arrow.gif, both wraps up to the next line.

Can you help me with this one chris?

Thanks,
RS

0
 
kssoftwareCommented:
Hi RS
Try adding to your <td..> style definition the following 'vertical-align' attribute:
<td style="width: 396px; height: 23px; vertical-align: top;">
Chhris
0
 
DGSTechAuthor Commented:
Hello Chris,
That did not do it. probably i am not making myself very clear. let me try:

I had two textboxes (lets call it T1 and T2). I click on image button and my calender control pops up. now when i click on the textbox without picking up from the calender control, (c1 and T1). The calender control is invisible. but again if i click on T2, then my caleder1 (c1) pops open (because of javascript). when this pops open, the image button (imagebutton1) wraps into the next line.
<td valign=top> did not do it.
is there some other way like using the format menu within vs design like using position absolute or relative or static etc.

Thanks for your patience and replies.
RS
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now