13728

Page reload issue

Question:

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 ?

<strong>.aspx file with js code</strong>

$(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(); }); } }; });

Answer1:

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:

<ul><li>$</li> <li>dom ready</li> </ul>

Whyle it should actually do:

<ul><li>$</li> <li>multiDatesPickerBinding</li> <li>dom ready</li> </ul>

Recommend

  • How to get system date in R5Rs in Scheme/DrRacket
  • Nothing happen on setting minDate in jquery datepicker?
  • Dividing an Array of Dates Into Contiguous Blocks [duplicate]
  • How can i set the start date as default end date if the user does not enter the end date in jquery?
  • Return data before current month
  • why do I get wrong month when parsing with java calendar
  • Using const int variable in switch statement
  • How do I get Interface Bundle to deliver previous date to DatePickerDialog?
  • XML SAX Parser not working - NullPointerException [closed]
  • How can I setMaxDate() for DatePicker to one month after the current date?
  • xml to oracle DB table : encountering problems
  • convert string to DateTime in C# with EDT at the end
  • passing string to ggplot function
  • Excel DATEVALUE function not working for today's date
  • Yii Booster datepicker not working correctly
  • How to Format the Bootstrap DatePicker for PHP
  • How to parse given date string using moment.js?
  • Controls in ItemTemplate can't be called in Code Behind
  • Serialize Date, Instant to ISO 8601 when using JSR310 java.time in spring
  • Parsing Java String to date
  • Create unique ids for a group
  • CSS Sprites don't work in IE[8/7/6]
  • how to find the index position of the ARRAY Where NSPredicate pick the value. I use filteredArrayUsi
  • Difference between two particular dates [duplicate]
  • PHP Carbon “month()” method generates wrong DateTime
  • Year, Month, and Day parameters describe an un-representable DateTime in Persian calender
  • jQuery - how to validate a date of birth using jQuery Validation plugin?
  • Visual Studio 2010 - 2015 does not use ymm* registers for AVX optimization
  • A simple datepicker in VueJS
  • How to make Plotly chart with year mapped to line color and months on x-axis
  • How to parsing NSDate to RFC 822 always use in English?
  • iOS Date formatting
  • Illegal mix of collations for operation for date/time comparison
  • Release, debug version and Authorization Google?
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Hits per day in Google Big Query
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How to push additional view controllers onto NavigationController but keep the TabBar?