it-swarm.com.de

Wie erstelle ich mit Ajax ein Dropdown-Menü mit benutzerdefinierten Feldern, das auf einem in der vorherigen Dropdown-Liste ausgewählten Beitrag basiert?

Ich bin unerfahren mit Ajax. Ich erstelle ein Formular, mit dem der Benutzer einen benutzerdefinierten Beitragstyp aus dem ersten Feld abrufen kann, der den Wert der Beitrags-ID zurückgibt. Dann möchte ich, dass Ajax diese Beitrags-ID nimmt und ein zweites Dropdown-Menü basierend auf einigen benutzerdefinierten Feldern für diesen Beitrag erstellt.

Folgendes habe ich bisher, das aus der ersten Antwort auf diese Frage angepasst wurde: Filtern einer zweiten Dropdown-Liste, wenn in der ersten ein Wert ausgewählt wird

In functions.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();
}

(Mir ist bekannt, dass der Code zum Erstellen der Daten noch einige Arbeit benötigt, um die richtigen Daten anzuzeigen.)

Und dann in der Seitenvorlage:

<?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(); ?>

Dieser Code hilft mir dabei. Sobald das Dropdown-Menü "#chooseEvent" eine Auswahl enthält, wird die richtige Beitrags-ID erfasst. Das Dropdown-Menü "#chooseDate" entleert sich nur von meinem Platzhalter, lädt jedoch nie etwas anderes.

Ich habe versucht, mit der dynamic_dropdown_func () einfach eine "Hallo Welt!" und das tut es auch nicht, also denke ich irgendwie, dass ich die Ajax-Funktion nicht richtig auslöse und zurückgebe.

1
John Chandler

Versuchen Sie in dynamic_dropdown_func() am Ende echo $event_dates; anstelle von return $event_dates;.

Außerdem frage ich mich, warum Sie global $wpdb; deklarieren, wenn Sie es nicht zu verwenden scheinen?

2
scott

Ich bevorzuge jQuery.ajax () over jQuery.post () , da ich mehr Kontrolle über die Fehlerverarbeitung zu haben scheine.

Führen Sie in Ihrer Seitenvorlage folgende Schritte aus:

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) {
                var data = {
                    action: 'dynamic_dropdown',
                    event: value
                    } ;

                jQuery.ajax ({
                    type: 'POST',
                    async: true,
                    url: ajaxUrl,
                    data: data,
                    dataType: 'JSON',
                    success: function (response) {
                        // handle ajax success
                        if (response.success) {
                            // handle success, returned with wp_send_json_success ()
                            dropdownDate.html (response.data) ;
                            }
                        else {
                            // handle errors, returned with wp_send_json_error ()
                            }
                        },
                    error: function (xhr, ajaxOptions, thrownError) {
                        // handle ajax errors
                        }
                    }) ;
                }
            });
        </script>";
    echo $grabDates;
}

Führen Sie in Ihrem functions.php folgende Schritte aus:

add_action( 'wp_ajax_dynamic_dropdown', array ($this, 'dynamic_dropdown_func' ));
add_action( 'wp_ajax_nopriv_dynamic_dropdown', array ($this, 'dynamic_dropdown_func' ));

function
dynamic_dropdown_func ()
{
    if (!isset($_POST['event'])) {
        wp_send_json_error ('event not set') ;
        }

    $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 () ;

    wp_send_json_success ($event_dates) ;
}

Beachten Sie die Verwendung von wp_send_json_success () und wp_send_json_error ()