Datepicker de jQuery beforeShowDay fonctionne seulement après le 1er clic
Je vais avoir un problème avec beforeShowDay.
Quand mon chargement de la page, le nombre de jours que j'ai dit de mettre en évidence ne sont pas mis en évidence jusqu'à ce que je clique sur un jour du calendrier. Aussi, si je clique sur le prochain mois de bouton et de revenir à l'original d'un mois, puis le "sélectionné" les jours sont mis en surbrillance comme prévu.
Donc, uniquement sur le premier tirage du calendrier ne les dates à ne pas mettre en évidence comme je l'ai programmé pour le faire. Cliquer dans le calendrier résout de lui-même.
Ai-je raté une option init? Veuillez voir mon exemple de code ci-dessous. Mon test de l'url est dans le répertoire protégé avec un user/pass de test/test. Regardez le mini-cal dans la colonne de droite en bas. Commutateur pour le mois prochain et en arrière pour voir mon problème. Note le en surbrillance jours im Mai. Il est également à noter que l'année de la liste déroulante est également absente jusqu'à ce qu'un clic se produise.
http://www.urbanbands.com/dev/cgi-bin/links/eventmgr.cgi?do=list
Le code:
<script>
$(document).ready(function(){
//get the current date
var today = new Date();
var m = today.getMonth(), d = today.getDate(), y = today.getFullYear();
//Need list of event dates for THIS month only from database.
//Declare 'dates' var before adding "beforeShowDay" option to the datepicker,
//otherwise, highlightDays() does not have the 'dates' array.
dates = [];
fetchEventDays(y, m+1);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
setDate: today,
inline: false
});
$('#datepicker').datepicker('option', 'onChangeMonthYear', fetchEventDays);
$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);
$('#datepicker').datepicker('option', 'onSelect', getday);
//------------------------------------------------------------------
//getday
//------------------------------------------------------------------
function getday(dateText, inst) {
$('#content').load('http://www.mydomain/eventmgr.cgi?do=view_day;date='+dateText+' #eventMgr_content', function() {
alert('Load was performed. '+dateText);
});
}
//------------------------------------------------------------------
//fetchEventDays
//------------------------------------------------------------------
function fetchEventDays(year, month) {
var paramStr ='?do=get_event_dates&yr=' + year + '&mo=' + month;
$.get('<%config.db_cgi_url%>/eventmgr-ajax.cgi'+ paramStr, function(data) {
var recur_dates = data.split(',');
for(var i = 0; i < recur_dates.length; i++) {
var date_parts = recur_dates[i].split('-');
dates.push(new Date(date_parts[0], date_parts[1]-1, date_parts[2]));
}
//This causes dates with events to highlight on initial draw, but
//when clicking to the next month, it switches back to orig month.
// $('#datepicker').datepicker('option', {}); //Refresh
});
}
//------------------------------------------------------------------
//highlightDays
//------------------------------------------------------------------
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if ((dates[i].getTime() == date.getTime())) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>Vous devez vous connecter pour publier un commentaire.
Merci @kingjiv Vous avez été correct à 100%. Le calendrier affichait avant la demande d'obtenir terminée. J'ai essayé d'utiliser le
whenméthode, mais ne pouvait pas obtenir les dates de manière asynchrone. Fondamentalement, je dois avoir les dates pour mettre en surbrillance avant le calendrier est affiché, donc j'ai dû utiliserasync: false(pas vrai).J'ai inclus mon code complet qui explique comment mettre en évidence plusieurs événements tiré à partir d'une base de données à l'aide de la
beforeShowDayoption. À l'aide deasyc: falsecorrection du problème où les mis en évidence les dates n'ont pas mis en évidence sur le tirage au sort initial. Le css pour changer les cellules de la couleur d'arrière-plan est inclus en tant que bien.Il y a encore une petite question, où 'l'année' menu déroulant ne s'affiche pas sur le tirage au sort initial, mais j'ai confirmé que cela n'arrive que dans FireFox 4. Cliquer sur le calendrier des causes de l'année menu à afficher. Safari affiche correctement l'année menu sur le tirage au sort initial.
Je ne pouvais pas voir comment jQuery.quand souhaitez aider (il ne regarde pas comme il l'aurait fait de reporter des événements à partir de la date picker) mais j'ai réussi à éviter async=false en désactivant le sélecteur de l'actualisation lorsque des données sont reçues dans l'ajax de rappel
Je ne peux pas voir votre exemple, parce que je me demande un nom d'utilisateur et mot de passe. Cependant, voir ci-dessous pour ce que je crois qui se passe.
$.getest simplement un raccourci pour faire de l'AJAX requête get. AJAX est Asynchrone, ce qui signifie que vous l'appelez et il n'a pas à attendre une réponse. Donc, fondamentalement, ce qui est probablement ce qui se passe est que le calendrier est affiché avant que la demande est complète.Il ya deux façons haut de ma tête que vous pouvez résoudre ce problème. L'une serait de changer votre obtenez complet de l'appel ajax et définir
async : true.http://api.jquery.com/jQuery.ajax/
L'autre option (et probablement la meilleure option serait d'utiliser
when.Whenvous permet donc d'attendre une requête ajax pour terminer avant de faire quelque chose d'autre. Cela lui permet de toujours être asynchrone, mais assure que le reliant le code n'est pas exécuté prématurément. De cette façon, d'autres actions peuvent être effectuées dans entre l'appel ajax et le code dépendant.http://api.jquery.com/jQuery.when/