Moi!
Mulla on sivulla tällainen datepicker http://www.eyecon.ro/datepicker/
Tämä datepicker on bindattu yhteen diviin. kun sivu ladataan, datepicker hakee ajaxilla .net servicestä onRender funktiossa tiedon joka päivälle jonka kalenteri piirtää, että onko päivä aktiivinen vai ei.
Koska kysely on aika raskas haluaisin laittaa loading animaation kalenterin päälle siksi aikaa kun kalenteria ladataan. Tämä toimii kun eka kerralla kalenteri ladataan, koska silloin ajetaan tuo datepickerin initialisoimiskoodi. mutta jos kuukautta vaihtaa, ajetaan vain tuo onRender funtio ja loading div jää ikuisesti esiin tuohon kalenterin päälle.
Minhin kohtaan tai miten tuo onRender funtio pitäisi rakentaa, jotta saisi loading animaation piiloon kun kaikki päivät on ladattu? Datepickerillä ei ikävä kyllä ole callback funktiota onRenderComplete.
Datepicker:in luonti:
$('.calendar').DatePicker({
flat: true,
date: now,
calendars: 2,
mode: 'range',
starts: 1,
locale: getLocaleString(),
onRender: function (date) {
//laitetaan kalenteri piiloon kunnes kaikki päivät on käyty läpi
//kuukautta vaihdettaessa ei tehdä kuin tämä funktio->loading animaatio jää ikuisesti näkyviin
$('.IG_Loading').show();
//palauttaa joka päivälle joko true tai false
return { disabled: dateNotAvailable(new Date(date))
}
},
onChange: function (formated, dates) {
//ajetaan aina kun päivä valitaan
$('.Loading').show();
$('inputDate').val(formated);
$('#Aloitus').val(dates[0].toLocaleString());
$('#Lopetus').val(dates[1].toLocaleString());
$('.Loading').hide();
}
});
//piilotetaan loading kun lataus valmis
$('.Loading').hide();
}
function dateNotAvailable(date) {
var d =new Date;
d = d.setDate(d.getDate()-1);
if (date.valueOf() < d.valueOf()) {
//tiputetaan pois päivät menneisyydestä
return true;
}
//ajax kutsu jolla tarkistetaan onko päivä vapaa
var notavailable=false;
$.ajax({
type: "POST",
data: "{'deitti': '" + generateVBDateTimeString(date,false) + "'}",
url: '<%=getWebserviceUrl %>isAvailable' ,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (msg) {
if (msg.d == "false") {
notavailable=true;
}
else {
notavailable=false;
}
}
});
return(notavailable);Toinen kysymys on että miten tuo ajaxi kutsu kannattaisi tehdä oikein? noin kun se nyt on (async=false) niin selain on jumissa kunnes on kyselyt valmiit. taasen jos sitä ei ole, kalenteri piirtyy ennen kuin kysely on valmis ja päivät joiden ei pitäisi olla valittavissa (tulee servicestä tieto) jäävät valittaviksi. Ekaa viikkoa jquery/ajax maailmassa, yrittäkää kestää :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.