Вопрос: Как использовать Ajax для создания выпадающего списка настраиваемых полей на основе сообщения, выбранного в предыдущем выпадающем списке?

У меня нет опыта работы с ajax. Я создаю форму, которая позволит пользователю выбрать пользовательский тип сообщения из первого поля, которое будет возвращать значение идентификатора сообщения. Затем я хотел бы, чтобы ajax взял этот идентификатор сообщения и создал второй выпадающий список на основе некоторых пользовательских полей для этого сообщения.

Вот то, что я имею до сих пор, которое было адаптировано из первого ответа на этот вопрос: Фильтровать второй выпадающий список, когда значение выбирается в первом

В функциях .php:

if ( is_admin() ) {    add_action( 'wp_ajax_dynamic_dropdown', 'dynamic_dropdown_func' );    add_action( 'wp_ajax_nopriv_dynamic_dropdown', 'dynamic_dropdown_func' );}function dynamic_dropdown_func () {    global $wpdb;    if (isset($_POST['event'])) {        $event_id = $_POST['event'];        $first = get_field('first_day',$event_id);        $last = get_field('last_day',$event_id);        $event_dates = '<option value="" disabled selected>Choose Date</option>';        $event_dates .= '<option value="'.$first.'">'.$first.'</option>';        while($first<$last) :            $first = $first + 1;            $event_dates .= '<option value="'.$first.'">'.$first.'</option>';        endwhile;    }ob_clean();return $event_dates;wp_die();}

(я знаю, что код для построения дат все еще нуждается в некоторой работе для отображения правильных дат.)

А затем в шаблоне страницы:

<?php function date_chooser () {    $ajax_url = admin_url( 'admin-ajax.php' );    $grabDates = "        <script>            var ajaxUrl = '{$ajax_url}',            dropdownEvent = jQuery('#chooseEvent'),            dropdownDate  = jQuery('#chooseDate');            dropdownEvent.on('change', function (e) {                var value = e.target.selectedOptions[0].value,                success,                data;                if (!!value) {                    data = {                        'event' : value,                        'action' : 'dynamic_dropdown'                    };                    success = function ( response ) {                        dropdownDate.html( response );                    };                    jQuery.post( ajaxUrl, data, success );                }            });        </script>";    return $grabDates;}echo date_chooser(); ?>

Этот код помогает мне в этом. Как только у выпадающего списка #chooseEvent есть выбор, он фиксирует правильный идентификатор сообщения, а затем выпадающий список #chooseDate просто очищается от моего заполнителя, но больше ничего не загружается.

Я просто пытался, чтобы dynamic_dropdown_func () просто возвращал "Hello world!" и это тоже не делает этого, так что почему-то я думаю, что не запускаю и не возвращаю функцию ajax должным образом.

Ответы и комментарии:

в вашем JS есть if (!! value) {(то есть double!). Это просто опечатка, когда вы ввели свой вопрос, или это действительно ваш реальный код?
Создан 23-03-2017 09:01 Paul 'Sparrow Hawk' Biron

@ Paul'SparrowHawk'Biron Я думаю, что это намеренное булево принуждение. Я не думаю, что здесь это необходимо, поскольку (насколько мне известно) значение всегда является строкой, даже если отсутствует атрибут value и внутренний текст - так что if (value) должно быть достаточно. Но принуждение ничего не повредит, и может подхватить какой-нибудь странный случай.
Создан 23-03-2017 09:01 bosco

Скотт - это сделал. Спасибо! Этот глобальный $ wpdb был всего лишь остатком от кода, на котором я его основывал. Мне даже не пришло в голову, что мне не нужно будет просто использовать запросы get_field.
Создан 26-03-2017 11:34 John Chandler

Попробовал этот. В итоге все изменения в полях «Выбор даты» вообще не инициировались - даже не удалялось то, что у меня там было ранее. Ответ выше работал, однако, так что я готов идти.
Создан 26-03-2017 11:12 John Chandler

В dynamic_dropdown_func () в конце попробуйте echo $ event_dates; вместо возврата $ event_dates ;.
Также мне интересно, почему вы объявляете global $ wpdb; когда вы, кажется, не используете его?
Создан 23-03-2017 10:00 scott45027

Я предпочитаю использовать jQuery.ajax (), а не jQuery.post (), так как у меня больше контроля над обработкой ошибок.
В шаблоне вашей страницы сделайте следующее:
функция
date_chooser ()
{
    $ ajax_url = admin_url ('admin-ajax.php');
    $ grabDates = "
    <Скрипт>
        var ajaxUrl = '{$ ajax_url}',
        dropdownEvent = jQuery ('# chooseEvent'),
        dropdownDate = jQuery ('# chooseDate');
        dropdownEvent.on ('change', function (e) {
            var value = e.target.selectedOptions [0] .value,
                успех,
                данные;
            if (!! value) {
                var data = {
                    действие: 'dynamic_dropdown',
                    событие: значение
                    };

                jQuery.ajax ({
                    тип: 'POST',
                    асинхронно: верно,
                    url: ajaxUrl,
                    данные: данные,
                    dataType: 'JSON',
                    success: function (response) {
                        // обработать ajax
                        if (response.success) {
                            // обработать успех, возвращенный с помощью wp_send_json_success ()
                            dropdownDate.html (response.data);
                            }
                        еще {
                            // обрабатывать ошибки, возвращаемые с помощью wp_send_json_error ()
                            }
                        },
                    error: function (xhr, ajaxOptions, thrownError) {
                        // обрабатывать ошибки ajax
                        }
                    });
                }
            });
         Скрипт> ";
    echo $ grabDates;
}

В вашем functions.php сделайте следующее:
add_action ('wp_ajax_dynamic_dropdown', массив ($ this, dynamic_dropdown_func '));
add_action ('wp_ajax_nopriv_dynamic_dropdown', массив ($ this, dynamic_dropdown_func '));

функция
dynamic_dropdown_func ()
{
    if (! isset ($ _ POST ['event'])) {
        wp_send_json_error («событие не установлено»);
        }

    $ event_id = $ _POST ['event'];
    $ first = get_field ('first_day', $ event_id);
    $ last = get_field ('last_day', $ event_id);
    $ event_dates = ' Выбрать дату option>';
    $ event_dates. = ''. $ first. ' option>';
    while ($ first <$ last):
        $ first = $ first + 1;
        $ event_dates. = ''. $ first. ' option>';
    ENDWHILE;

    ob_clean ();

    wp_send_json_success ($ event_dates);
}

Обратите внимание на использование wp_send_json_success () и wp_send_json_error ()
Создан 23-03-2017 10:36 Paul 'Sparrow Hawk' Biron1,8071318