jQuery DatePicker - '假'点击页面加载答案

【问题标题】：jQuery DatePicker - 'fake' click on page loadjQuery DatePicker - '假'点击页面加载
【发布时间】：2010-03-13 23:27:59
【问题描述】：

我有一个关于 jQuery UI DatePicker 的快速问题。

当我加载页面时，defaultDate: 0 可以很好地选择当天的日期。我想在日期上创建一个“假”点击，这样它将执行我的 JavaScript 函数并从数据库中检索信息。我尝试在页面加载时调用该函数，但这不起作用。

$(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);
}

我已经粘贴了我的 DatePicker 类，以及使用的两个函数（一个从数据库中检索信息，一个用于存储）。

基本上我想在 DatePicker 上镜像 onSelect: 函数，但在页面首次加载时。

谢谢！

【问题讨论】：

抱歉代码显示有点乱，不知道如何停止：S

标签： jquery datepicker

【解决方案1】：

试试这样的：

$(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);
}

【讨论】：

【解决方案2】：

在页面加载时运行ajaxFunction() 的问题是日期选择器中选定的日期尚未发送...在ajaxFunction 中您执行以下操作：

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

您可以在构建查询之前检查对getDate() 的有效响应，而是对不同的php 页面执行ajax 请求，或者使用js 来检查getDate() 的返回值，如果可以使用它，如果不使用 javascript 日期函数来使用当前日期。

此外，所有 xmlhttprequest 的东西……如果您已经在使用 jQuery，那么使用内置的 ajax 方法可能会更整洁。

【讨论】：

【解决方案3】：

您可以尝试使用trigger() 方法，如下所示：$("button:first").trigger('click');，取自API entry。

【讨论】：