Dates fetched using ajax but not highlighted in Jquery UI datepicker, PHP(使用AJAX获取但未在jQuery UI Datepicker中突出显示的日期,PHP)
问题描述
我使用jQuery Datepicker突出显示特定日期。日期是用PHP和MySQL从数据库中获取的。将根据SELECT标记中的选定值获取日期。成功获取日期并在控制台中显示。
如果我直接获取脚本中的所有日期,则它会显示突出显示的日期。但当我使用SELECT标记并通过AJAX发送所选值时,它就不会了。
jQuery:
<script>
$(function() {
// An array of dates
var eventDates = {};
$("#select").on("change", function() {
var truck = $(this).val();
$.ajax({
url: 'ajax/vehicledate.php',
type: "POST",
/*contentType: "application/json; charset=utf-8",*/
data: {
val: truck
},
success: function(data) {
console.log(data);
}
});
// datepicker
$('#start').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", 'Tooltip text'];
} else {
return [true, '', ''];
}
}
});
});
});
</script>
获取所有日期的jQuery
<script>
$(function() {
// An array of dates
var eventDates = {};
<?php
$sql = "SELECT * from `ut_trips` WHERE `deisel` > 0";
$result = $connect->query($sql);
while( $final=$result->fetch_assoc() )
{
?>
eventDates[new Date('<?php
$orgDate = date($final['date']);
$date = str_replace('-"', '/', $orgDate);
$newDate = date("Y/m/d", strtotime($date));
echo $newDate ?>')] = new Date(
'<?php $orgDate =date($final['date']);
$date = str_replace('-"', '/', $orgDate);
$newDate = date("Y/m/d", strtotime($date));
echo $newDate
?>'
);
<?php
}
?>
// datepicker
$('#start').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", 'Tooltip text'];
} else {
return [true, '', ''];
}
}
});
});
});
</script>
AJAX PHP文件
<?php
include("../partials/connect.php");
$v = $_POST['val'];
$sql = "SELECT * from `table` WHERE `value1` > 0 AND `value2` = '".$v."'";
$result = $connect->query($sql);
while( $final=$result->fetch_assoc() )
{
?>
eventDates[new Date('<?php
$orgDate = date($final['date']);
$date = str_replace('-"', '/', $orgDate);
$newDate = date("Y/m/d", strtotime($date));
echo $newDate ?>')] = new Date(
'<?php $orgDate =date($final['date']);
$date = str_replace('-"', '/', $orgDate);
$newDate = date("Y/m/d", strtotime($date));
echo $newDate
?>'
);
<?php
}
?>
控制台输出
eventDates[new Date('2021/11/10')] = new Date(
'2021/11/10'
);
eventDates[new Date('2021/11/12')] = new Date(
'2021/11/12'
);
eventDates[new Date('2021/11/13')] = new Date(
'2021/11/13'
);
更新:
回显Jason格式的日期
echo jason_encode($newDate);
jQuery
dataType: "json",
success: function(data) {
console.log(data);
return data;
}
使用dataType:";json";在控制台中不输出任何内容,如果我将其注释掉,它将在Colsole中输出eventDates[new Date('2021/11/12')] = new Date( '2021/11/12' );
。
推荐答案
我所能看到的在已呈现日历之后更新显示的最佳方法是使用the refresh
method。不过,如何突出新的日期呢?为此,您可以将新日期添加到现有的eventDates
集,然后只需刷新整个日历-beforeShowDay
将处理更新的新eventDates
集,并且您的新日期将突出显示。
有关工作示例,请参阅下面的代码片断。
但首先,您的代码对SQL注入是开放的!首先,立即修复这个问题,例如How can I prevent SQL injection in PHP?它应该非常简单,例如可能是这样的:
include("../partials/connect.php");
$sql = "SELECT * from `table` WHERE `value1` > 0 AND `value2` = ?";
$stmt = $connect->prepare($sql);
$stmt->bind_param('s', $_POST['val']);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
// ... etc, some tips below
好的,我们来看看Java脚本。注意事项和建议:
当前您正在选择更改处理程序内初始化DatePicker。这意味着每次更改SELECT时,您都会重新初始化DatePicker。您不应该这样做-只需初始化一次,而不受任何用户交互的影响。
我不确定我是否理解您为什么要这样组织
eventDates
。至少根据您在这里展示的代码/需求,它将作为一个简单的数组简单得多,类似于:// An array of dates var eventDates = [ "2021/12/01", "2021/12/02", "2021/12/03", ];
我已经在下面的代码片段中使用了此演示代码。
在您的AJAX调用中,您使用
val: selectvalue
传递一个值--但是selectvalue
似乎没有在任何地方定义。您已经找到了选定的值-truck
。这就是您要发送的值。Convention isPOST用于更改数据(例如,购买、更新记录),而GET用于读取数据。您只是加载了一些日期数据,所以这确实应该是一个GET。我建议坚持惯例,并更新您的后端,以响应GET而不是POST。
从AJAX调用收到新日期后,
需要将它们添加到现有的。更新根据评论中的讨论,新日期实际上应该完全替换现有日期:eventDates
集合中。如果eventDates
像上面建议的那样是一个简单的数组,那就很容易了(至少如果您search SO for answers!):eventDates.push(...newDates);
.eventDates = newDates;
最后,刷新整个日历:
$('#start').datepicker("refresh");
把所有这些放在一起,下面是一个有效的演示:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">$(function() {
// An array of dates - dummy data for demo
var eventDates = [
"2021/12/01",
"2021/12/02",
"2021/12/03",
];
// Initialise datepicker - once
$('#start').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function(date) {
// date is a JS date, we want to compare it to the dates
// in eventDates, so we need to format it. Datepicker has
// a handy utility for formatting dates, see
// https://api.jqueryui.com/datepicker/#utility-formatDate
var formatted = $.datepicker.formatDate('yy/mm/dd', date);
// Easy way to check if a value is in an array
if (eventDates.indexOf(formatted) === -1) {
return [true, '', ''];
} else {
return [true, "event", 'Tooltip text'];
}
}
});
$("#select").on("change", function() {
// Can't do AJAX here, but we can write the success method, and
// just use a hard-coded set of results. Say your AJAX returns
// a new set of dates, as an array:
var data = [
"2021/12/24",
"2021/12/25",
"2021/12/26",
];
// To merge existing dates with new dates
// eventDates.push(...data);
// To show only new dates:
eventDates = data;
// So new eventDates is updated with the new dates, we want
// to reresh the whole calendar.
$('#start').datepicker("refresh");
// Done! To be clear, your AJAX success would look like this:
// success: function(data) {
// eventDates.push(...data);
// $('#start').datepicker("refresh");
// }
});
});
.event {
background-color: red;
}
<link href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<input id="start" type="text">
<select id="select">
<option>Change me</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
$final['date']
是什么格式?为了演示如何创建和返回数组,我只假设它实际上是一个格式正确的日期。根据需要进行调整。
// Define the empty array we will return.
$eventDates = [];
// Iterate over your query results ...
while ($final = $result->fetch_assoc()) {
// ... adding each date to the array, let's say $final['date'] is
// formatted like 2021/12/25
$eventDates[] = $final['date'];
}
// We want to return JSON, so jQuery can read it
header('Content-Type: application/json; charset=utf-8');
echo json_encode($eventDates);
这篇关于使用AJAX获取但未在jQuery UI Datepicker中突出显示的日期,PHP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使用AJAX获取但未在jQuery UI Datepicker中突出显示的日期,PHP
基础教程推荐
- 通过 PHP SoapClient 请求发送原始 XML 2021-01-01
- 在 Woocommerce 中根据运输方式和付款方式添加费用 2021-01-01
- WooCommerce 中选定产品类别的自定义产品价格后缀 2021-01-01
- 如何在 PHP 中的请求之间持久化对象 2022-01-01
- 超薄框架REST服务两次获得输出 2022-01-01
- mysqli_insert_id 是否有可能在高流量应用程序中返回 2021-01-01
- 在 PHP 中强制下载文件 - 在 Joomla 框架内 2022-01-01
- Libpuzzle 索引数百万张图片? 2022-01-01
- XAMPP 服务器不加载 CSS 文件 2022-01-01
- 在多维数组中查找最大值 2021-01-01