Calendar extender - same javascript for multiple instances of user control not working

Question

User-163331333 posted

Hi, I created a usercontrol that will show on a textbox a calendarextender that displays only the years, here is the code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<script type="text/javascript" language="javascript">

//function onCalendarShown(sender, e) {sender._switchMode("years"); }
function onCalendarShown(sender, e) {
var cal = $find("calendar"); 
//Setting the default mode to year
cal._switchMode("years", true);

//Iterate every year Item and attach click event to it
if (cal._yearsBody) {
for (var i = 0; i < cal._yearsBody.rows.length; i++) {
var row = cal._yearsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", call);
}
}
}
}

function onCalendarHidden() {
var cal = $find("calendar"); 
//Iterate every month Item and remove click event from it
if (cal._yearsBody) {
for (var i = 0; i < cal._yearsBody.rows.length; i++) {
var row = cal._yearsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", call);
}
}
}
}

function call(eventElement) {
var target = eventElement.target;
switch (target.mode) {
case "year":
var cal = $find("calendar");
cal._visibleDate = target.date;
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
}
</script>

<asp:textbox ID="txtBox" runat="server" Width="90px" Font-Size="Small"></asp:textbox>
<cc1:CalendarExtender ID="calendar" runat="server" TargetControlID="txtBox" OnClientHidden="onCalendarHidden" OnClientShown="onCalendarShown" Enabled="True" Format="yyyy" DefaultView="Years">
</cc1:CalendarExtender>

When I use a single instance of this control in my aspx page it works fine but when i use more than one instances in my aspx page the javascript of all of the controls is overwritten by the last instance of the control in my page and no other control works.

Please tell me how I have to call the specific "calendar" in the Javascript functions

Thanks

Answer 1

User1734617369 posted

Hi,

You could change the code to look something like this:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<script type="text/javascript" language="javascript">
    //function onCalendarShown(sender, e) {sender._switchMode("years"); }
    function <%=this.ID%>onCalendarShown(sender, e) {
        var cal = $find("<%=this.ID%>_calendar");
        //Setting the default mode to year
        cal._switchMode("years", true);

        //Iterate every year Item and attach click event to it
        if (cal._yearsBody) {
            for (var i = 0; i < cal._yearsBody.rows.length; i++) {
                var row = cal._yearsBody.rows[i];
                for (var j = 0; j < row.cells.length; j++) {
                    Sys.UI.DomEvent.addHandler(row.cells[j].firstChild, "click", <%=this.ID%>call);
                }
            }
        }
    }


    function <%=this.ID%>onCalendarHidden() {
        var cal = $find("<%=this.ID%>_calendar");
        //Iterate every month Item and remove click event from it
        if (cal._yearsBody) {
            for (var i = 0; i < cal._yearsBody.rows.length; i++) {
                var row = cal._yearsBody.rows[i];
                for (var j = 0; j < row.cells.length; j++) {
                    Sys.UI.DomEvent.removeHandler(row.cells[j].firstChild, "click", <%=this.ID%>call);
                }
            }
        }
    }


    function <%=this.ID%>call(eventElement) {
        var target = eventElement.target;
        switch (target.mode) {
            case "year":
                var cal = $find("<%=this.ID%>_calendar");
                cal._visibleDate = target.date;
                cal.set_selectedDate(target.date);
                cal._switchMonth(target.date);
                cal._blur.post(true);
                cal.raiseDateSelectionChanged();
                break;
        }
    }
</script>

<asp:textbox ID="txtBox" runat="server" Width="90px" Font-Size="Small"></asp:textbox>
<cc1:CalendarExtender ID="calendar" runat="server" TargetControlID="txtBox" Enabled="True" Format="yyyy" DefaultView="Years">
</cc1:CalendarExtender>

and in the code behind for the control do:

protected void Page_Load(object sender, EventArgs e)
        {
            calendar.OnClientShown = this.ID + "onCalendarShown";
            calendar.OnClientHidden = this.ID + "onCalendarHidden";
        }

Best regards
Johan

Answer 2

User-163331333 posted

Thanks Johan!!!