0

jqueryとphpを使用して、データベースの日付をdatepickerで「強調表示」しようとしています。私は私を助ける何かを見つけるためにあらゆるものを見てきました...

これは私が現在使用しているコードです。日付をクリックしてデータベースからイベントを取得し、それをdivに出力できるonSelect状態があることに注意してください。これは機能し、イベントが強調表示された日付も作成したいと思います..

$(document).ready(function() {
        var SelectedDates = {};
        $.getScript('eventdates.php', function(eventsdate) {
            eventsdate;
        });
        $("#kalender").datepicker({
            firstDay: 1,
            dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
            monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            dateFormat: "yy-mm-dd",
            beforeShowDay: function(date) {
                var Highlight = SelectedDates[date];
                if (Highlight) {
                    return [true, "Highlighted", Highlight];
                }
                else {
                    return [true, '', ''];
                }
            },
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate('yy-mm-dd', myDate);
                $.ajax({
                    url: 'events.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {selectedData: newFormat},
                    success: function(result) {
                        if (result.date === newFormat) {
                            $('#event').html(result['date'] + " " + result['event']);
                        }
                        else {
                            $('#event').html(result['none']);
                        }
                    }
                });
            }
        });

    });​

eventdates.php

<?php

include_once ('connect.php');
$sql = mysql_query("SELECT * FROM `events`");
while ($row = mysql_fetch_array($sql)) {
    echo "SelectedDates[new Date('{$row['date']}')] = new Date('{$row['date']}')<br/>";
}
?>

events.php

<?php
include_once ('connect.php');
if (isset($_POST['selectedData'])) {
    $sql2 = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
    $row2 = mysql_fetch_array($sql2);
    if ($row2['date'] == $_POST['selectedData']) {
        $sql = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
        while ($row = mysql_fetch_array($sql)) {
            $data = array(
                "date" => $row['date'],
                "event" => utf8_encode($row['event'])
            );
            echo json_encode($data);
        }
    } else {
        $data = array(
            "none" => "Inget event denna dag!"
        );
        echo json_encode($data);
    }
}

?>
4

2 に答える 2

2

私は問題を解決し、この種の問題に苦しんでいる他のすべての人と私の解決策を共有したいと思いました！

jQueryスクリプト

<script>
    $(document).ready(function() {
        $("#kalender").datepicker({
            firstDay: 1,
            dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
            monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
            dateFormat: "yy-mm-dd",
            onSelect: function(dateText, inst) {
                var myDate = new Date(dateText);
                var newFormat = $.datepicker.formatDate('yy-mm-dd', myDate);
                $.ajax({
                    url: 'events.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {selectedData: newFormat},
                    success: function(result) {
                        if (result.date === newFormat) {
                            $('#event').html(result['date'] + "<br />\n" + result['event']);
                        }
                        else {
                            $('#event').html(result['none']);
                        }
                    }
                });
            }, beforeShowDay: function(date) {

                var yy = date.getFullYear(), mm = date.getMonth() + 1, dd = date.getDate();
                if (dd < 10) {
                    var dt = yy + "-" + mm + "-0" + dd;
                } else {
                    var dt = yy + "-" + mm + "-" + dd;
                }
<?php include_once ('eventdates.php') ?>
                return [true, ''];

            }
        });

    });
</script>

events.php

<?php
include_once ('connect.php');
if (isset($_POST['selectedData'])) {
    $sql2 = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
    $row2 = mysql_fetch_array($sql2);
    if ($row2['date'] == $_POST['selectedData']) {
        $sql = mysql_query("SELECT * FROM `events` WHERE `date`='{$_POST['selectedData']}'");
        while ($row = mysql_fetch_array($sql)) {
            $data = array(
                "date" => $row['date'],
                "event" => utf8_encode($row['event'])
            );
            echo json_encode($data);
        }
    } else {
        $data = array(
            "none" => "Inget event denna dag!"
        );
        echo json_encode($data);
    }
}

?>

eventdates.php

<?php

include_once ('connect.php');
$sql = mysql_query("SELECT * FROM `events`");

while ($row = mysql_fetch_array($sql)) {
    echo "var selDate" . $row['event_ID'] . " = '" . $row['date'] . "';";
    echo "if (dt === selDate" . $row['event_ID'] . ") {";
    echo "return [true, 'Highlighted'];";
    echo "}";
}
?>

これが他の誰かに役立つことを願っています！

于 2012-11-25T21:46:37.853 に答える
0

AJAX は定義上非同期です。これは、完了する前に datepicker コードを実行していることを意味します$.geScript。のコールバックで datepicker コードを呼び出す必要があります$.getScript

$.getScript('eventdates.php', function() {
         /* new script has fired*/
         $("#kalender").datepicker({.....});

});
于 2012-11-24T15:54:51.080 に答える