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

  • 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