使用 ajax 獲取但未在 Jquery UI 日期選擇器中突出顯示的日期，PHP

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 tru_shar正在尋找這個問題的更詳細的答案：

我想從數據庫中獲取日期，並從 select 選項中選擇一個值后，它應該在 jquery UI 日期選擇器中突出顯示獲取的日期。 我能夠獲取日期但無法將其傳遞給日期選擇器。 由於日期將在腳本中傳遞，我不知道該怎么做。 我知道如何將值傳遞給 div Id 或 class ，但這里就是這種情況。 您的幫助可能會幫助我擺脫困境。 謝謝

我正在使用 Jquery 日期選擇器來突出顯示特定日期。 正在從 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: selectvalue
                },
                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

}

?>

控制台 output

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

using dataType: "json" 在控制台中不輸出任何內容，如果我將其注釋掉，它將 output eventDates[new Date('2021\/11\/12')] = new Date( '2021\/11\/12' ); 在鞋底。

Answer 1

我可以看到在日歷已經呈現后更新顯示的最佳方法是使用refresh方法。 如何突出顯示新日期？ 您可以通過將新日期添加到現有的eventDates集，然后簡單地刷新整個日歷來做到這一點 - beforeShowDay將處理新的、更新的eventDates集，並且您的新日期將被突出顯示。

有關工作示例，請參見下面的代碼段。

但首先，您的代碼對 SQL 注入開放！ 首先立即修復此問題，例如如何防止 PHP 中的 SQL 注入？ 它應該很簡單，例如可能是這樣的：

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

好的，轉到 Javascript。 一些注意事項和建議：

1. 目前，您正在 select 更改處理程序中初始化日期選擇器。 這意味着每次更改 select 時，您都會重新初始化日期選擇器。 你不應該這樣做 - 初始化一次，獨立於任何用戶交互。

2. 我不確定我是否理解您為什么以這種方式構建eventDates 。 至少根據您在此處顯示的代碼/要求，它作為一個簡單的數組會簡單得多，例如：

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

   我在下面的代碼片段中使用了這個作為我的演示代碼。

3. 在您的 AJAX 調用中，您使用val: selectvalue傳遞了一個值 - 但selectvalue似乎沒有在任何地方定義。 不過，您確實已經找到了選定的值 - truck 。 這就是您要發送的值。

4. 約定是POST 用於更改數據（例如進行購買、更新記錄），而 GET 用於讀取數據。 你只是在加載一些日期數據，所以這真的應該是一個 GET。 我建議堅持約定並更新您的后端以響應 GET 而不是 POST。

5. 從 AJAX 調用中收到新日期后，您需要將它們添加到現有的eventDates集中。 如果eventDates是上面建議的簡單數組，那很容易（至少如果您搜索 SO 來尋找答案:)： eventDates.push(...newDates); .

6. 最后，刷新整個日歷： $('#start').datepicker("refresh");

綜上所述，這是一個工作演示：

 $(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", ]; // We want to append those new dates to the end of the existing // set of eventDates. To do that: eventDates.push(...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="foo">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
    $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);