jQuery DatePicker - 'fake' click on page load

Posted by Danny on Stack Overflow See other posts from Stack Overflow or by Danny
Published on 2010-03-13T23:27:59Z Indexed on 2010/03/13 23:35 UTC
Read the original article Hit count: 559

Filed under:
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about datepicker