由于我的开发人员不可用,我正在尝试在项目中使用我的少量JQuery知识,但是我正面临一个障碍。我正在尝试创建一个cookie,该cookie将在日期选择器中保存用户选择的日期范围,并在用户刷新或返回页面时使报告在datatable中可用。
我现在成功完成的工作是,选择日期后创建/刷新cookie,并在用户返回时将选择的日期范围重新设置为datepicker,但由于这些日期未刷新报告,因为Ajax请求未发送至数据表。
到目前为止是我的代码:
$('#demo').daterangepicker({
"timePicker24Hour": true,
"autoApply": true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
"alwaysShowCalendars": true,
"startDate": Cookies.get('startdate'),
"endDate": Cookies.get('enddate'),
"opens": "left",
}, function(start, end, label) {
$("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
Cookies.set('startdate', start.format('MM/DD/YYYY'));
Cookies.set('enddate', end.format('MM/DD/YYYY'));
$.ajax({
url:"campaign-table.php",
method:"POST",
data:{todaydate:todaydate},
success:function(data){
$('#campaigntable').html(data);
}
});
});
我需要在代码结尾处的Ajax请求,以便在页面加载时执行。我尝试了下面的代码,但似乎没有用。矮个子,它会在页面加载时创建cookie(如果不存在的话),否则它将使用cookie中的日期将Ajax请求发送到数据表以显示报告:
$(function(){
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output =
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day + '/'
+ d.getFullYear() ;
if (Cookies.get('startdate') == null || Cookies.get('enddate') == null) {
Cookies.set('startdate', output);
Cookies.set('enddate', output);
}
if (Cookies.get('startdate') && Cookies.get('enddate')) {
var todaydate = Cookies.get('startdate')+"to"+Cookies.get('enddate');
$.ajax({
url:"campaign-table.php",
method:"POST",
data:{todaydate:todaydate},
success:function(data){
$('#campaigntable').html(data);
}
});
}
});
编辑:我认为我没有在适当的位置进行更改。我有此代码正是campaign-table.php应该加载的位置。
$(document).ready(function(){
var todaydate = (new Date()).toISOString().split('T')[0]+"to"+(new Date()).toISOString().split('T')[0];
$.ajax({
url:"campaign-table.php",
method:"POST",
data:{todaydate:todaydate},
success:function(data){
$('#campaigntable').html(data);
}
});
});
如果我正确理解了这个问题,您是否需要与用户选择页面加载发生日期的功能相同的功能?这意味着:
为此,我仅需更改一些小事:
1] daterangepicker
当前使用现有的cookie设置开始/结束日期。但这将在用户第一次访问该页面时失败,因为这些cookie尚不存在。可以在此处测试并设置一些默认值来处理这种情况。
2)您要在页面加载时运行的AJAX与用户选择日期时要运行的AJAX完全相同。因此,我将其提取到一个通用函数中,您可以在每个需要的地方引用它,以避免重复代码。
$(document).ready(function(){
// Create a simple function to fire the AJAX using the date you specify,
// and show the response on the page. We can reference this whenever we
// need to do that.
function showReport(todaydate) {
$.ajax({
url:"campaign-table.php",
method:"POST",
data:{todaydate:todaydate},
success:function(data){
$('#campaigntable').html(data);
}
});
}
// Check if we have cookies with dates, if not, set them to defaults
// (today for both). Now when the date range picker uses the
// cookies the very first time a user visits, it will work.
if (Cookies.get('startdate') == null || Cookies.get('enddate') == null) {
Cookies.set('startdate', (new Date()).toISOString().split('T')[0]);
Cookies.set('enddate', (new Date()).toISOString().split('T')[0]);
}
var todaydate = Cookies.get('startdate') + "to" + Cookies.get('enddate');
// We have our dates, fire off the AJAX, and display the response.
// This runs on page load, as you need.
showReport(todaydate);
// Now initialise the date range picker
$('#demo').daterangepicker({
// ... all your options, unchanged ...
}, function(start, end, label) {
$("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
Cookies.set('startdate', start.format('MM/DD/YYYY'));
Cookies.set('enddate', end.format('MM/DD/YYYY'));
// Fire off the AJAX with the selected dates and show the response.
showReport(todaydate);
});
});
您不需要以$(function(){
开头的问题中引用的代码,我们刚刚添加到$(document).ready(function(){
的东西现在就可以处理。