Как я могу предотвратить мерцание дампикера jQuery при смене месяца?

Question

Я создал jQuery datepicker, у которого есть несколько дней цветных (выходные, праздничные дни). Дело в том, что деление цвета на эти дни зависит от вызова ajax, который возвращает, какие дни месяца должны быть окрашены.

Когда я нажимаю на кнопку, чтобы изменить месяц, вызов ajax завершен, он возвращает дни, которые нужно покрасить, мерцает dateplicker, а затем отображает месяц правильно. Я хотел бы показать новый месяц после того, как вызов ajax будет выполнен, а не ранее. Есть ли способ избежать мерцания? Кажется, он работает правильно в Internet Explorer, но он не работает в Firefox.

Image

EDIT

При нажатии на кнопку смены месяца, то DatePicker называет beforeShowDay за каждый день в течение месяца, чтобы сделать его. Если вы поместите контрольную точку в строку console.log (пример jsfiddle приведен ниже), вы увидите, что datepicker закрыт и что он не отображается до тех пор, пока каждый день не будет отрисован. В моем случае я хочу сохранить старый месяц, пока новый месяц не будет полностью вычерчен.

В примере, который вы можете увидеть ниже, чертеж календаря выполняется очень быстро, а дни месяца отображаются так быстро, что кажется, что это мгновенно, но если вы выполняете некоторые вызовы ajax, которые извлекают данные базы данных чтобы определить цвет, который будет иметь каждый день, месяц мерцает. В отличие от Internet Explorer, эта проблема возникает со мной в Firefox.

Как это исправить?

Fiddle пример:

http://jsfiddle.net/b6V3W/370/

beforeShowDay: tratarDiasEspeciales, 

function tratarDiasEspeciales(date){ 
    ajax call to decide the colour of the cell 

    if(condition){ 
     //colour the day with blue 
     return[true,'blue'] 
    }else{ 
    //colour the day with red 
    return[true,'red'] 
    } 
} 

Answer 1

Решение проблемы было в библиотеке под названием jquery-ui.custom-1.9.1.custom.js. В этой библиотеке есть следующая строка кода:

inst.dpDiv.empty().append(this._generateHTML(inst)); 

Эта линия первый удаляет данные в Datepicker (в заголовок с месяц и год данные и дней), а затем добавляет HTML-код нового месяца с generatedHTML функции.

Чтобы решить эту проблему, я разделил код на две части; Сначала я получить новый HTML-код, а затем я опорожнить данные datepicker's, чтобы добавить новый HTML-код:

var quitar = this._generateHTML(inst); 
inst.dpDiv.empty().append(quitar); 

С помощью этого решения Аякса вызовы выполняются первым и календарь остается inmutable (его это не распространяется мерцание), затем, когда новый код готов, он вставлен.

Я знаю, что это не лучший способ решить проблему (если я изменю версию jquery, мне тоже придется изменить код), но это единственный способ, который я нашел.

Answer 2

Я создал еще один fiddle, изменив вашим. Здесь я приведу часть вашей бизнес-логики (вызов ajax для извлечения данных из базы данных, чтобы определить цвет) в функцию обратного вызова onChangeMonthYear.

$("#dater").datepicker('option', 'onChangeMonthYear', onChangeMonthYearCustom); 

Здесь вы можете заполнить массив с именем renderedDates, который будет содержать все данные даты красящих и важно то, что эта функцию обратного вызова сохранить текущий вынесенный календарь UI во время выполнения и эта функция обратного вызова вызывается перед «beforeShowDay» функция обратного вызова. Я установил точку отладки во время выполнения и убедился, что это так. Итак, теперь на обратном вызове «beforeShowDay» ваш код не должен ждать завершения вызова ajax, тем самым выполнив ваше требование. Проверьте это решение и сообщите мне, работает ли он так, как вы ожидали.