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

标签 jquery datepicker

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

谢谢!

最佳答案

尝试这样的事情:

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

关于jQuery DatePicker - 'fake' 点击页面加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2440492/

相关文章:

jquery - 在同一级别创建 2 个子剑道网格

python - Plotly Dash 日期选择器范围显示在输入下方

c# - MVC 项目中的 jQuery 错误 : Datepicker is not a function

android - 如何在android datepicker中获取该月的第一个和最后一个日期

javascript - JQuery-UI Datepicker() 单击“以编程方式完成”

javascript - 避免关闭模态对话框 bootstrap 和 jsf

javascript - 如何在WordPress中使用上传特色图片的URL

javascript - 图像作为 &lt;input type ="button"/> 的值

javascript - 使用具有特定 id 的 jquery 提交表单

php - 使用 HTML 日期范围表单数据在 MySQL 查询中选择日期范围