Problem with a calendar control

J

Jackpanel

Freshman
Joined
Feb 23, 2004
Messages
35
I'm working on a pop-up calendar control that will eventually open up in a centered layer. The goal is to make it similar to a modal window, but all in one browser window instead of opening the calendar in a new popup window.

I have a read-only textbox with a little calendar icon next to it, which makes the calendar DIV visible when clicked. The user then selects their date, presses Accept and it hides the DIV and fills the textbox. This works perfectly the first time a user tries it.

My problem is that if the user opens the calendar again, then no matter what the click on, it it triggering the btnAccept_click or btnCancel_click events and closing the DIV without updating the textbox. It won't allow the user to change months, because it closes as soon as the NextMonth button is pressed.

You can view the sample here:

http://edtweb01dev411.edthosting.com/om/member/test.aspx

Use Test as both the email and login to access the page. Click the calendar, pick a date, then choose accept. Works fine, right? Now try it again without reloading and see the problem.

Code is as follows:

Test.aspx

Code: 
<%@Register tagprefix="OM" Tagname="calendar" src="~/Resource/TestCalendar.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TEST.aspx.vb" Inherits="TEST"%>
<%= "<script language='JavaScript' src='" & Application("Root") & "/Resource/Global/common.js'></script>" %>
<%= "<link href='" & Application("Root") & "/Resource/style1.css' type='text/css' rel='stylesheet'>" %>
<%= "<link href='" & Application("Root") & "/Resource/style1-print.css' type='text/css' rel='stylesheet'>" %>

<script>
	function init(){
		divCalendar.style.left = CenterLeft - 70
		divCalendar.style.top = CenterTop - 150
	}
</script>
<body onload="init()">
	<form id="OpportunityForm" method="post" runat="server">
		<asp:textbox id="lblSubmissionDue" runat="server" ReadOnly="true" type="text" cssclass="details-alt1-input"></asp:textbox>
		<IMG alt="" src="../images/calendar.gif" onclick="javascript:show('divCalendar')">
		<div id="divCalendar" class="calendar"><OM:calendar runat="server" id="objCalendar"/></div>
	</form>
</body>

Test.aspx.vb

Code: 
Public Class TEST
    Inherits System.Web.UI.Page

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

    End Sub

End Class

TestCalendar.aspx

Code: 
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="TESTCalendar.ascx.vb" Inherits="TESTCalendar" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<asp:panel id="pnlCalendar" runat="server">
	<TABLE borderColor="black" cellSpacing="0" cellPadding="0" border="1">
		<TR>
			<TD>
				<TABLE borderColor="white" cellSpacing="0" cellPadding="0" border="5">
					<TR>
						<TD>
							<asp:Calendar id="Calendar1" runat="server" PrevMonthText="<<" NextMonthText=">>" Width="200px" Height="150px" BorderColor="Black" BackColor="#EFEFE0" OnSelectionChanged="Calendar1_SelectionChanged" Font-Names="Arial" Font-Size="X-Small">
								<SelectorStyle font-bold="True" forecolor="Navy" backcolor="Navy"></SelectorStyle>
								<NextPrevStyle forecolor="White" backcolor="#293473"></NextPrevStyle>
								<DayHeaderStyle font-bold="True"></DayHeaderStyle>
								<SelectedDayStyle font-bold="True" forecolor="White" backcolor="#293473"></SelectedDayStyle>
								<TitleStyle font-bold="True" forecolor="White" backcolor="#293473"></TitleStyle>
								<OtherMonthDayStyle font-italic="True" backcolor="#BFC5E1"></OtherMonthDayStyle>
							</asp:Calendar>
							<asp:ImageButton id="imgAccept" runat="server" ImageUrl="~/images/accept.gif"></asp:ImageButton>
							<asp:ImageButton id="imgCancel" runat="server" ImageUrl="~/images/cancel.gif"></asp:ImageButton>
							<asp:literal id="Literal1" runat="server"></asp:literal></TD>
					</TR>
				</TABLE>
			</TD>
		</TR>
	</TABLE>
</asp:panel>

TestCalendar.aspx.vb

Code: 
Public MustInherit Class TESTCalendar
    Inherits System.Web.UI.UserControl
    Protected WithEvents Calendar1 As System.Web.UI.WebControls.Calendar
    Protected WithEvents imgAccept As System.Web.UI.WebControls.ImageButton
    Protected WithEvents imgCancel As System.Web.UI.WebControls.ImageButton
    Protected WithEvents pnlCalendar As System.Web.UI.WebControls.Panel
    Protected WithEvents Literal1 As System.Web.UI.WebControls.Literal

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

    End Sub

    Public Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)

    End Sub

    Private Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs)
        If e.Day.Date = DateTime.Now().ToString("d") Then
            e.Cell.BackColor = System.Drawing.Color.LightGray
        End If
    End Sub

    Private Sub imgAccept_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgAccept.Click
        Dim strjscript As String = "<script language=""javascript"">"
        strjscript = strjscript & "OpportunityForm.lblSubmissionDue.value='" & Format$(Calendar1.SelectedDate, "MMMM d, yyyy") & "';hide('divCalendar')" 
        strjscript = strjscript & "</script" & ">" 
        Literal1.Text = strjscript
    End Sub

    Private Sub imgCancel_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgCancel.Click
        Dim strjscript As String = "<script language=""javascript"">"
        strjscript = strjscript & "hide('divCalendar')" 
        strjscript = strjscript & "</script" & ">" 
        Literal1.Text = strjscript
    End Sub
End Class
 
I can't even get the page to load correctly because of JavaScript errors (left is not defined).
 
bri189a said:
I can't even get the page to load correctly because of JavaScript errors (left is not defined).
Click to expand...
Oops, I forgot to update the application root. It was pointing to a local javascript. It should be fixed now.

Doing a bit more investigating, the problem seems to be that the literal is storing the javascript command to hide the window whenever the Accept or Cancel buttons are used. I could partially fix it by resetting the literal to a blank script in the Calendar1_SelectionChanged section, but it wasn't triggering when a user was changing months.

What I need to do is clear out the literal every time it fires so that it doesn't fire again the next time the form is submitted. I'm just not sure where exactly I can do this.
 
Back
Top