jQuery DatePicker - 'fake' click on page load
- by Danny
Hey!
I've got a quick question about the jQuery UI DatePicker.
When I load the page, defaultDate: 0 will work fine with selecting the current day's date. I would like to create a 'fake' click on the date so it will execute my JavaScript function and retrieve information from the database. I tried calling the function when the page loads but that doesn't work.
$(document).ready(function(){
$("#datepicker").datepicker({ gotoCurrent: false,
onSelect: function(date, inst) { ajaxFunction(date); },
dateFormat: 'dd-mm-yy',
defaultDate: 0,
changeMonth: true,
changeYear: true
});
});
//Browser Support Code
function ajaxFunction(date){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var queryString = "?date=" + date;
ajaxRequest.open("GET", "getDiary.php" + queryString, true);
ajaxRequest.send(null);
}
function ajaxAdd(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
var day1 = $("#datepicker").datepicker('getDate').getDate();
var day2 = (day1 < 10) ? '0' + day1 : day1;
var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;
var month2 = (month1 < 10) ? '0' + month1 : month1;
var year1 = $("#datepicker").datepicker('getDate').getFullYear();
var year2 = (year1 < 1000) ? year1 + 1900 : year1;
var fullDate = day2 + "-" + month2 + "-" + year2;
var queryString = "?breakfast=" + diary1.breakfast.value;
queryString = queryString + "&lunch=" + diary1.lunch.value;
queryString = queryString + "&dinner=" + diary1.dinner.value;
queryString = queryString + "&date=" + fullDate;
ajaxRequest.open("GET", "addDiary.php" + queryString, true);
ajaxRequest.send(null);
alert("Added value to database!");
diary1.breakfast.value = "";
diary1.lunch.value = "";
diary1.dinner.value = "";
ajaxFunction(fullDate);
}
I have pasted my DatePicker class, and the two functions that are used (one to retrieve information from the database, and one to store).
Basically I want to mirror the onSelect: function on the DatePicker, but when the page first loads.
Thanks!
