Page reload issue

问题:

When page loads for the first time below mentioned calender control is not working.But when I reload the page, it's working properly.Can I have any trick for solve this weird issue ?

.aspx file with js code

         $(document).ready(function () {

                    var initMethod = function () {

                            multiDatesPickerBinding();
                        };

                        initMethod(); //when page loads for first time

    var multiDatesPickerBinding = function () {
                        $('.button-set').buttonset();

                        $(".datePicker").each(function () {
                            var target = $(this);
                            target.datepicker({ showAnim: '', changeMonth: true, minDate: target.data('min'), changeYear: true, dateFormat: 'm/d/yy', yearRange: 'c-20:c+10' });
                        });
                        $('.enumeration').buttonset();

                        $.datepicker._getDate = function (inst) {
                            var startDate = (!inst.currentYear || (inst.input && inst.input.value == '') ? null :
                                this._daylightSavingAdjust(new Date(
                                    inst.currentYear, inst.currentMonth, inst.currentDay)));
                            return startDate;
                        };

                        $.datepicker._defaults.dateFormat = 'yy-mm-dd';
                        $.valHooks['multiDatesPicker'] = { get: function (elem) { return $(elem).multiDatesPicker('getDates'); } }; //, set: function (elem, v) { $(elem).multiDatesPicker('addDates', v); } };
                        $.valHooks['datepicker'] = { get: function (elem) { return $(elem).datepicker('getDate'); } }; //, set: function (elem, v) { $(elem).datepicker('setDate', v); } };

                        window.checkForCalendars = function () {
                            $('.inline-calendar,.inline-multi-calendar').each(function () {
                                var self = $(this);
                                var type = 'datepicker';
                                var format = 'yy-mm-dd';
                                var target = self.data('target');
                                var value = self.data('value');
                                var args = {
                                    dateFormat: format,
                                    onSelect: function () { whenSelectDateFromCalendar(self); }
                                };
                                args['numberOfMonths'] = self.data('months') || 1;
                                args['minDate'] = self.data('min');
                                args['maxDate'] = self.data('max');

                                if (self.data('multi')) {
                                    type = 'multiDatesPicker';
                                    value = value ? value.split(',') : null;
                                }
                                if (target) {
                                    var rawValue = $('#' + target).val();
                                    if (rawValue)
                                        value = $.datepicker.parseDate(format, rawValue);

                                    args.altField = '#' + target;
                                    args.altFormat = format;
                                }

                                self[type](args);
                                self.data('val.type', type);

                                if (type == "multiDatesPicker") {
                                    if (value) {
                                        self.multiDatesPicker('addDates', value);
                                    }
                                    var disallowed = self.data('disallowed');
                                    if (disallowed) {
                                        self.multiDatesPicker('addDates', disallowed.split(','), 'avoided');
                                    }
                                } else {
                                    self.datepicker('setDate', value);
                                    var allowedRaw = self.data('allowed');
                                    if (allowedRaw !== undefined) {
                                        var allowed = allowedRaw.split(',');
                                        $('.inline-calendar').datepicker('option', 'beforeShowDay', function (date) {
                                            var format = $.datepicker.formatDate('yy-mm-dd', date);
                                            return [$.inArray(format, allowed) >= 0 ? true : false, ''];
                                        });
                                    }
                                }
                            });
                        };
                        window.checkForCalendars();
                    };


 //for when select a date from calendar  
                var whenSelectDateFromCalendar = function (self) {

                    var isBordingDateFromDropOffCalendar = $(self).hasClass('begin-date');

                    if (!isBordingDateFromDropOffCalendar) {

                        ShowLoader();
                        hideErrors();

                        $('.bookingerror').empty();
                        var keys = initKeyValues();

                        if (keys.selectedDates.length == 0) {
                            $("#error-dates").show();
                            return false;
                        }

                        $('#available-times').load('/PetBooking/GetAvailableTimesForServiceAndDates/', { 'providerKey': '<%:Model.Provider.Key%>', 'ownerKey': '<%:Model.Owner.Key%>', 'serviceId': $('#ddlService').val(), 'petKeys': keys.petKeys, 'selectedDates': keys.selectedDates, 'employeeKey': keys.employeeKey }, function (response, status, xhr) {
                            if (status == "error") {
                                exceptionForDates(xhr);
                            } else {

                                $("#error-dates").hide();
                                timePickerBinding();
                            }
                            HideLoader();
                        });
                    }
                };
             });

回答1:

Move your function definition multiDatesPickerBinding outside the DOM ready function and you're probably fine. To tell you what happens when you load the page (ctrl+f5) ... At loading the browser stores the function definitions in the DOM tree or memory. Once that is done it starts executing in order.

In your case it binds on load:

• $
• dom ready

Whyle it should actually do:

• $
• multiDatesPickerBinding
• dom ready