Answered by:
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
Thursday, January 2, 2014 11:27 AM
Answers
-
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- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, January 2, 2014 2:20 PM
All replies
-
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- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, January 2, 2014 2:20 PM -
User-163331333 posted
Thanks Johan!!!
Thursday, January 2, 2014 4:09 PM