Попытка получить данные из базы данных с помощью AJAX и отобразить в fullcalendar.

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример кода
JavaScript
PHP
Применение
Проверка
Оптимизация и исправление ошибок

Вопрос или проблема

Итак, я пытаюсь создать fullcalendar с событиями, которые показывают события из моей базы данных для конкретного activity_id.
Вот мой код:
js:

jQuery(document).ready(function() {
    var activityId = activityData.activityId;
    console.log(activityId);
    console.log("jQuery работает");
var calendarEl = jQuery('#calendar-' + activityId);
var startSlot = null; // Сохранить первый выбранный временной слот
var endSlot = null;
var calendar = new FullCalendar.Calendar(calendarEl[0], {
    initialView: 'timeGridWeek', // Опции: 'timeGridDay', 'timeGridWeek'
    slotDuration: '00:15:00',    // Настроить длительность временного слота (например, 30 минут)
    selectable: true,            // Разрешить выбор временных слотов
    allDaySlot: false,           // Скрыть "Весь день", если не нужно
    events: function(fetchInfo, successCallback, failureCallback) { 
        console.log('Activity ID внутри events:', activityId); 
        jQuery.ajax({
        url:my_ajax_object.ajaxurl,
        type: 'POST',
        data: {
            action: 'get_timeslot_data',
            activityId: activityId,
        },
        success: function(response) {
            if (response.success) {
                successCallback(response.data); // Отправить события в FullCalendar
            } else {
                console.error("Ошибка при получении событий:", response.data);
                failureCallback(response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error("Ошибка AJAX:", error);
            failureCallback(error);
        }
    });
    },
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'timeGridDay,timeGridWeek,dayGridMonth'
    },
});
calendar.render();
});

и php

<?php 
add_action('wp_ajax_get_timeslot_data', 'get_timeslot_data'); // Пользователи, авторизованные в системе
add_action('wp_ajax_nopriv_get_timeslot_data', 'get_timeslot_data'); // Гости (если нужно)

function get_timeslot_data() {
    if (!isset($_POST['activityId'])) {
        wp_send_json_error("Отсутствует ID активности");
    }

    global $wpdb;
    $activity_id = intval($_POST['activityId']);
    $table_name="wp_booking_seasons";

    $result = $wpdb->get_row($wpdb->prepare("SELECT timeslot_dates FROM $table_name WHERE id = %d", $activity_id));

    if (!$result || empty($result->timeslot_dates)) {
        wp_send_json_error("Временные слоты не найдены");
    }

    $time_slots = unserialize($result->timeslot_dates); // Предполагается, что это сериализовано

    // Преобразовать временные слоты в формат событий для FullCalendar
    $events = [];
    foreach ($time_slots as $slot => $dates) {
        foreach ($dates as $date) {
            $events[] = [
                'title' => $slot,
                'start' => $date . "T" . explode(" - ", $slot)[0], // Формат: YYYY-MM-DDTHH:MM
                'end' => $date . "T" . explode(" - ", $slot)[1]
            ];
        }
    }

    wp_send_json_success($events);
}

?>

почему это не работает?
спасибо

Ответ или решение

Для решения проблемы с интеграцией FullCalendar и AJAX для отображения событий из базы данных, важно понимать, как взаимодействуют компоненты JavaScript и PHP, используемые в вашем коде. Давайте разберем и попробуем понять, почему ваш текущий код может не работать так, как ожидалось.

Теория

Клиентская часть: JavaScript с использованием библиотеки jQuery и FullCalendar.

FullCalendar: это мощная JavaScript-библиотека для отображения календарей и событий. Он имеет различные представления, такие как «timeGridWeek», «dayGridMonth» и так далее. Календарь может быть настраиваемым и поддерживать добавление событий через AJAX.
AJAX: позволяет асинхронно загружать данные с сервера без перезагрузки страницы. В данном случае, AJAX-запрос используется для получения данных о событиях с сервера на основе activityId.

Серверная часть: PHP на базе WordPress, взаимодействие с базой данных через $wpdb.

WordPress AJAX API: предоставляет функции для обработки AJAX-запросов, как для авторизованных, так и для неавторизованных пользователей.
$wpdb: это объект WordPress для взаимодействия с базой данных. Он позволяет делать SQL-запросы безопасным способом через методы, такие как prepare.

Пример кода

JavaScript

jQuery(document).ready(function() {
    var activityId = activityData.activityId;
    console.log(activityId);
    console.log("jQuery is working");
    var calendarEl = jQuery('#calendar-' + activityId);
    var calendar = new FullCalendar.Calendar(calendarEl[0], {
        initialView: 'timeGridWeek',
        slotDuration: '00:15:00',
        selectable: true,
        allDaySlot: false,
        events: function(fetchInfo, successCallback, failureCallback) { 
            jQuery.ajax({
                url: my_ajax_object.ajaxurl,
                type: 'POST',
                data: {
                    action: 'get_timeslot_data',
                    activityId: activityId
                },
                success: function(response) {
                    if (response.success) {
                        successCallback(response.data);
                    } else {
                        console.error("Error fetching events:", response.data);
                        failureCallback(response.data);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", error);
                    failureCallback(error);
                }
            });
        },
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridDay,timeGridWeek,dayGridMonth'
        }
    });
    calendar.render();
});

PHP

add_action('wp_ajax_get_timeslot_data', 'get_timeslot_data');
add_action('wp_ajax_nopriv_get_timeslot_data', 'get_timeslot_data');

function get_timeslot_data() {
    if (!isset($_POST['activityId'])) {
        wp_send_json_error("Missing activity ID");
    }

    global $wpdb;
    $activity_id = intval($_POST['activityId']);
    $table_name = "wp_booking_seasons";

    $result = $wpdb->get_row($wpdb->prepare("SELECT timeslot_dates FROM $table_name WHERE id = %d", $activity_id));

    if (!$result || empty($result->timeslot_dates)) {
        wp_send_json_error("No time slots found");
    }

    $time_slots = unserialize($result->timeslot_dates);
    $events = [];
    foreach ($time_slots as $slot => $dates) {
        foreach ($dates as $date) {
            $events[] = [
                'title' => $slot,
                'start' => $date . "T" . explode(" - ", $slot)[0],
                'end' => $date . "T" . explode(" - ", $slot)[1]
            ];
        }
    }

    wp_send_json_success($events);
}

Применение

Проверка

Консоль браузера: Убедитесь, что в консоли браузера нет ошибок JavaScript. Обратите внимание на вывод console.log для проверки переменных.
AJAX URL: Убедитесь, что my_ajax_object.ajaxurl правильно настроен и содержит верный URL для AJAX-запросов WordPress.
Верность данных activityId: Убедитесь, что activityData.activityId имеет корректное значение. Консольный вывод должен показывать правильный ID активности.
AJAX запросы: Проверьте, отправляются ли AJAX-запросы. Для этого используйте инструменты разработчика в браузере (вкладка Network).
WordPress AJAX: Убедитесь, что ваши PHP экшены зарегистрированы правильно и вызываются корректно.

Оптимизация и исправление ошибок

Ошибка сериализации: Убедитесь, что данные, хранящиеся в базе данных, действительно сериализованы, и для их десериализации используйте unserialize корректно. Возможные проблемы могут возникнуть, если данные не сериализованы в формате PHP или повреждены.
Отзывчивость сервера: Проверьте, корректно ли сформирован серверный ответ. Используйте wp_send_json_success и wp_send_json_error для передачи результатов AJAX-запроса и отладочных сообщений.
Управление ошибками: Добавьте более подробные сообщения об ошибках как в JavaScript (через console.error), так и в PHP (например, добавив логирование или вывод отладочной информации через error_log).
Права доступа: Если ваши AJAX-запросы не работают для неавторизованных пользователей, убедитесь, что обе функции действия зарегистрированы как для авторизованных, так и для неавторизованных (guests) пользователей.

Надеемся, что эти подсказки и проверки помогут вам устранить проблему и интегрировать полное календарное расписание на вашем сайте. Если проблема сохраняется, дополнительных данных, включая вывод серверного лога ошибок и responses в Developer tools, может быть полезным для более точной диагностики.