Question

我有一个关于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：函数，但是当页面首次加载时。

谢谢！

Answer 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);
}

Answer 2

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

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

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

此外，所有xmlhttprequest的东西......如果你已经在使用jQuery，它可能更整洁地使用内置的ajax方法。

Answer 3

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

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

3 个答案: