Search code examples
asp.netajaxuser-controlsajaxcontroltoolkitscriptmanager

Ajax Calendar Control within usercontrol is not working


I'm using a Ajax Calendar Control within a usercontrol and for one page that references the calender it works fine but for the other page although i can t see any different references or anything when i click on the calender text box the calender does not pop up.

Here is some of the code let me know if you need to see more:

Inside the usercontrol:

<td>
        <asp:TextBox ID="txtStartFrom" runat="server" Width="80" MaxLength="10" />
        <ajaxToolkit:CalendarExtender ID="calDateTo" runat="server" Animated="true" TargetControlID="txtStartFrom"
            Format="dd/MM/yyyy" />
        <asp:RequiredFieldValidator ID="reqValStartFrom" runat="server" ControlToValidate="txtStartFrom" ErrorMessage="You must enter a start date" CssClass="errorinputleftred" />
        <Opal:DateValidator ID="dValCalendar" runat="server" ControlToValidate="txtStartFrom"
            Display="dynamic" ErrorMessage="Invalid date" SetFocusOnError="True" CssClass="errorinputleft" />
    </td>

Page that refers to the control:

<%@ Register Src="RecurrenceControl.ascx" TagName="Recurrence" TagPrefix="uc" %>
<div...>
    <uc:Recurrence ID="ucRecurrence" runat="server" />  
</div>

Edited: jobAssign.ascx

    <%@ Control Language="vb" AutoEventWireup="false" Codebehind="JobAssign.ascx.vb" Inherits="HelpDeskWebsite.JobAssign" %>
<%@ Register TagPrefix="Opal" Namespace="Opal.CustomWebControls" Assembly="Opal.CustomWebControls" %>
<%@ Register Src="RecurrenceControl.ascx" TagName="Recurrence" TagPrefix="uc" %>
<script type="text/javascript">

        // function for custom validator to check whether one of the boxes is checked.
    function validateCheckboxes(sender, args) {
        if (document.getElementById('<% = rbOpsJobs.ClientID %>').checked == true || document.getElementById('<% = rbOpsProject.ClientID %>').checked == true || document.getElementById('<% = rbOpsWish.ClientID %>').checked == true) {
            args.IsValid = true;
        }
        else if (document.getElementById('<% = rbOpsJobs.ClientID %>').Visibility == 'hidden' && document.getElementById('<% = rbOpsProject.ClientID %>').visibility == 'hidden' && document.getElementById('<% = rbOpsWish.ClientID %>').visibility == 'hidden') {
            args.IsValid = true;
        }
    }
</script>

<div class="helptext">
    <% = HelpText %>
</div>

<asp:UpdateProgress ID="upProcessing" runat="server">
    <ProgressTemplate>
        <div class="floatProgress">
            <img id="imgProgress" src="~/images/ajax-loader.gif" alt="Processing" runat="server" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel ID="upJobAssign" runat="server">
    <Triggers>
        <asp:PostbackTrigger ControlID="imgbtnAllocate"></asp:PostbackTrigger>
    </Triggers>
    <ContentTemplate>

        <div id ="divResetRecurringJobs" class="divResetRecurringJobs" runat="server">

                <uc:Recurrence ID="ucRecurrence" runat="server" />             
                <asp:ImageButton ID="imgUpdateRecurrence" runat="server" ImageUrl="../images/buttons/allocate.jpg" ImageAlign="Right" />

        </div>
    </ContentTemplate>
</asp:UpdatePanel>

<ajaxToolkit:UpdatePanelAnimationExtender ID="aeJobAssign" runat="server" TargetControlID="upJobAssign">
    <Animations>
        <OnUpdating>
            <Parallel Duration=".2" Fpt="30">
                <EnableAction enabled="false"/>
                <FadeOut Duration=".2" Fps="20" MinimumOpacity="0.3" />          
            </Parallel>
        </OnUpdating>     
        <OnUpdated>
            <Parallel Duration=".2" Fpt="30">
                <FadeIn Duration=".2" Fps="20" MinimumOpacity="0.3"/>
                <EnableAction enabled="true"/>
            </Parallel>
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

<asp:CustomValidator ID="cvSelectOneCheckbox" runat="server" ClientValidationFunction="validateCheckboxes" ErrorMessage="You must select a job type."></asp:CustomValidator>

RecurrenceControl.ascx (where the calender is)

       <%@ Control Language="vb" AutoEventWireup="false" Codebehind="RecurrenceControl.ascx.vb" Inherits="HelpDeskWebsite.RecurrenceControl" %>
<%@ Register TagPrefix="Opal" Namespace="Opal.CustomWebControls" Assembly="Opal.CustomWebControls" %>
<%@ Register Src="~/webparts/SearchUsers.ascx" TagName="SearchUsers" TagPrefix="uc" %>
<script language="javascript" type="text/javascript">function validateRecurrenceInformation(sender, args)
{
    var checkBoxList = document.getElementById ('<%= cblweekday.ClientID %>');
    var checkBoxes = checkBoxList.getElementsByTagName('input');
    if (document.getElementById('<% = rbdaily1.ClientID %>').checked == true && document.getElementById('<% = txtEveryNumberOfDays.ClientID %>').value == '') 
        {
            args.IsValid = false;
        } 

        else if (document.getElementById('<% = rbYearly1.ClientID %>').checked == true && document.getElementById('<% = txtDayOfYear.ClientID %>').value == '') 
        {
            args.IsValid = false;
        } 
        else if (document.getElementById('<% = rbWeekly1.ClientID %>').checked == true) 
        {
            for(var i = 0; i < checkBoxes.length - 1; i++) 
            {
                if (checkBoxes[i].checked == true && document.getElementById('<% = txtEveryWeeks.ClientID %>').value != '') 
                {
                    args.IsValid = true;
                    break;
                }
                else
                {
                    args.IsValid = false;
                }
            }
        } 
        else if (document.getElementById('<% = rbdaily1.ClientID %>').checked == false && document.getElementById('<% = rbdaily2.ClientID %>').checked == false && document.getElementById('<% = rbweekly1.ClientID %>').checked == false && document.getElementById('<% = rbmonthly1.ClientID %>').checked == false && document.getElementById('<% = rbyearly1.ClientID %>').checked == false && document.getElementById('<% = rbMonthly2.ClientID %>').checked == false && document.getElementById('<% = rbMonthly3.ClientID %>').checked == false) 
        {
            args.IsValid = false;
        } 
        else 
        {
            args.IsValid = true;
        }
}
</script>
<div class="divQuestionText">
    Please select the recurrence options you require for this request.</div>
<table id="tblRecurrence" cellpadding="0" cellspacing="0">
    <tr>
        <td class="title">
            Start:</td>
        <td>
            <asp:TextBox ID="txtStartFrom" runat="server" Width="80" MaxLength="10" />
            <ajaxToolkit:CalendarExtender ID="calDateTo" runat="server" Animated="true" TargetControlID="txtStartFrom"
                Format="dd/MM/yyyy" />
            <asp:RequiredFieldValidator ID="reqValStartFrom" runat="server" ControlToValidate="txtStartFrom" ErrorMessage="You must enter a start date" CssClass="errorinputleftred" />
            <Opal:DateValidator ID="dValCalendar" runat="server" ControlToValidate="txtStartFrom"
                Display="dynamic" ErrorMessage="Invalid date" SetFocusOnError="True" CssClass="errorinputleft" />
        </td>
    </tr>
    <tr class="split">
        <td class="title">
            Daily</td>
        <td>
            <asp:RadioButton ID="rbDaily1" GroupName="grpRecurr" runat="server" />Every
            <asp:TextBox ID="txtEveryNumberOfDays" Width="20" runat="server" />
            day(s)</td>
    </tr>
    <tr>
        <td class="title">
            &nbsp;</td>
        <td>
            <asp:RadioButton ID="rbDaily2" GroupName="grpRecurr" runat="server" />Every Workday
            (Mon - Fri)</td>
    </tr>
    <tr class="split">
        <td class="title">
            Weekly</td>
        <td>
            <asp:RadioButton ID="rbWeekly1" GroupName="grpRecurr" runat="server" />Recur every
            <asp:TextBox ID="txtEveryWeeks" Width="20" runat="server" />
            week(s) on:<br />
            <asp:CheckBoxList ID="cblWeekday" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow">
                <asp:ListItem Text="Monday" Value="1" />
                <asp:ListItem Text="Tuesday" Value="2" />
                <asp:ListItem Text="Wednesday" Value="4" />
                <asp:ListItem Text="Thursday" Value="16" />
                <asp:ListItem Text="Friday" Value="32" />
            </asp:CheckBoxList>
        </td>
    </tr>
    <tr class="split">
        <td class="title">
            Monthly</td>
        <td>
            <asp:RadioButton ID="rbMonthly1" GroupName="grpRecurr" runat="server" />
           <%-- Day
            <asp:TextBox ID="txtDay" Width="20" runat="server" />--%>
           Recur every 
            <asp:DropDownList ID="ddlAmountMonths" runat="server">
                <asp:ListItem Text="1" Value="1" />
                <asp:ListItem Text="2" Value="2" />
                <asp:ListItem Text="3" Value="3" />
                <asp:ListItem Text="4" Value="4" />
                <asp:ListItem Text="5" Value="5" />
                <asp:ListItem Text="6" Value="6" />
                <asp:ListItem Text="7" Value="7" />
                <asp:ListItem Text="8" Value="8" />
                <asp:ListItem Text="9" Value="9" />
                <asp:ListItem Text="10" Value="10" />
                <asp:ListItem Text="11" Value="11" />
                <asp:ListItem Text="12" Value="12" />
            </asp:DropDownList>
            month(s).
        </td>
    </tr>
        <tr>
        <td class="title"></td>
        <td>
            <asp:RadioButton ID="rbMonthly3" GroupName="grpRecurr" runat="server" />
            First day of the month
        </td>
    </tr>
    <tr>
        <td class="title"></td>
        <td>
            <asp:RadioButton ID="rbMonthly2" GroupName="grpRecurr" runat="server" />
            Last working day of the month
        </td>
    </tr>
    <tr class="split">
        <td class="title">
            Yearly</td>
        <td>
            <asp:RadioButton ID="rbYearly1" GroupName="grpRecurr" runat="server" />
            Every
            <asp:TextBox ID="txtDayOfYear" Width="20" runat="server" />
            <asp:DropDownList ID="ddlMonths" runat="server">
                <asp:ListItem Text="January" Value="1" />
                <asp:ListItem Text="February" Value="2" />
                <asp:ListItem Text="March" Value="3" />
                <asp:ListItem Text="April" Value="4" />
                <asp:ListItem Text="May" Value="5" />
                <asp:ListItem Text="June" Value="6" />
                <asp:ListItem Text="July" Value="7" />
                <asp:ListItem Text="August" Value="8" />
                <asp:ListItem Text="September" Value="9" />
                <asp:ListItem Text="October" Value="10" />
                <asp:ListItem Text="November" Value="11" />
                <asp:ListItem Text="December" Value="12" />
            </asp:DropDownList>
            Set time period
            <asp:DropDownList ID="ddlYearAmount" runat="server">
                <asp:ListItem Text="Every Year" Value="1" />
                <asp:ListItem Text="Every 2 Years" Value="2" />
                <asp:ListItem Text="Every 3 Years" Value="3" />
            </asp:DropDownList>
        </td>
    </tr>
    <tr class="split">
    <td class="title">Self Assign</td>
    <td><asp:CheckBox id="chkselfAssign" runat="server" /></td></tr>
        <tr class="split">
        <td class="title">
            End On:</td>
        <td>
            <asp:TextBox ID="txtEndOn" runat="server" Width="80" MaxLength="10" CausesValidation="true"
                AutoPostBack="true" />
            <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Animated="true" TargetControlID="txtEndOn"
                Format="dd/MM/yyyy" />
            <Opal:DateValidator ID="DateValidator1" runat="server" ControlToValidate="txtEndOn"
                Display="dynamic" ErrorMessage="Invalid date" SetFocusOnError="True" CssClass="errorinputleft" />
        </td>
    </tr>
</table>
<asp:CustomValidator ID="cvRecurrenceCheck" runat="server" ClientValidationFunction="validateRecurrenceInformation" ErrorMessage="Please enter the correct recurrence ticket information for your specific choice"></asp:CustomValidator>

Edit for comment below about form tag

the form tag is inside another .aspx page which calls the jobdetails.ascx page as so

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="screenScrapeAssign.aspx.vb" Inherits="HelpDeskWebsite.screenScrapeAssign" %>
<%@ Register Src="~/webparts/JobDetails.ascx" TagName="JobDetails" TagPrefix="uc" %>
<LINK rel="stylesheet" type="text/css" href="http://localhost:1137/email/screenscrapemail.css" />
<form id=ssform runat="server">
<asp:ScriptManager ID="smMaster" runat="server"/>
<uc:JobDetails ID="ucJobDetails" runat="server" Title="Request Details" TitleIconImageUrl="~/images/icons/ticketdetails.jpg" />
 </form>    

Any help appreciated. Thanks


Solution

  • weirdly it has just started to work even though i haven t added anything to it - it seems that their was a problem with all the calender controls on that page - but they were working in live - so maybe a visual studio issue - and now for whatever reason they all seem to be working - including the ones in my usercontrol which weren t working before - thankyou for everyones help though.