jQuery DatePicker - 'fake' click on page load

Question

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!

Answer 1

The problem with running ajaxFunction() on page load is that the selected date in the datepicker won't yet be sent...in ajaxFunction you do the following:

var day1 = $("#datepicker").datepicker('getDate').getDate();

You could either check for a valid response to getDate() before you build the query, and instead perform an ajax request to a different php page, or use js to check the return value of getDate(), if ok use it, if not use the javascript date functions to use the current date.

Also, all that xmlhttprequest stuff...if you're already using jQuery its probably tidier to use the built-in ajax methods.

Answer 2

Try something like this:

$(document).ready(function(){
    $("#datepicker").datepicker({ gotoCurrent: false,
        onSelect: ajaxFunction,
        dateFormat: 'dd-mm-yy',
        defaultDate: 0,
        changeMonth: true,
        changeYear: true
    });
    ajaxFunction();
});

function ajaxFunction(date){
    if (!date){ 
        var d = $("#datepicker").datepicker('getDate'),
        date = $.datepicker.parseDate('dd-mm-yy',d);
    }
    $.ajax({
        url:"getDiary.php",
        type: "GET",
        data: {
            'date':date
        },
        success: function(data) {
            $('#ajaxDiv').html(data);
        }
    });
}

function ajaxAdd(){
    var d = $("#datepicker").datepicker('getDate'),
        fullDate = $.datepicker.parseDate('dd-mm-yy',d);

    $.ajax({
        url:"getDiary.php",
        type: "GET",
        data: {
            'breakfast':diary1.breakfast.value,
            'lunch':diary1.lunch.value,
            'dinner':diary1.dinner.value,
            'date':fullDate
        },
        success: function(data) {
            $('#ajaxDiv').html(data);
        }
    });

    alert("Added value to database!");
    diary1.breakfast.value = "";
    diary1.lunch.value = "";
    diary1.dinner.value = "";
    ajaxFunction(fullDate);
}

Answer 3

You could try using the trigger() method like so: $("button:first").trigger('click');, taken from the API entry.