使用AJAX获取但未在jQuery UI Datepicker中突出显示的日期，PHP [英] Dates fetched using ajax but not highlighted in Jquery UI datepicker, PHP

查看：71
本文介绍了使用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脚本。注意事项和建议：

  1. 当前您正在选择更改处理程序内初始化DatePicker。这意味着每次更改SELECT时，您都会重新初始化DatePicker。您不应该这样做-只需初始化一次，而不受任何用户交互的影响。

  2. 我不确定我是否理解您为什么要这样组织eventDates。至少根据您在这里展示的代码/需求，它将作为一个简单的数组简单得多，类似于：

    // An array of dates
var eventDates = [
    "2021/12/01",
    "2021/12/02",
    "2021/12/03",
];

    我已经在下面的代码片段中使用了此演示代码。

  3. 在您的AJAX调用中，您使用val: selectvalue传递一个值--但是selectvalue似乎没有在任何地方定义。您已经找到了选定的值-truck。这就是您要发送的值。

  4. Convention isPOST用于更改数据(例如，购买、更新记录)，而GET用于读取数据。您只是加载了一些日期数据，所以这确实应该是一个GET。我建议坚持惯例，并更新您的后端，以响应GET而不是POST。

  5. 从AJAX调用收到新日期后，需要将它们添加到现有的eventDates集合中。如果eventDates像上面建议的那样是一个简单的数组，那就很容易了(至少如果您search SO for answers！)：eventDates.push(...newDates);.。更新根据评论中的讨论，新日期实际上应该完全替换现有日期：eventDates = newDates;

  6. 最后，刷新整个日历：$('#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>

对于您的PHP，假设您已经修复了前面描述的SQL注入问题，则需要返回一个JSON数组。我真的搞不懂您的现有代码在做什么--$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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆