web-dev-qa-db-fra.com

Comment utiliser Ajax pour créer un menu déroulant de champs personnalisés en fonction d'un message sélectionné dans le menu déroulant précédent?

Je suis inexpérimenté avec ajax. Je construis un formulaire qui permettra à l'utilisateur de récupérer un type d'article personnalisé dans le premier champ qui renverra la valeur de l'ID d'article. Ensuite, j'aimerais que ajax prenne cet ID de publication et crée un deuxième menu déroulant basé sur certains champs personnalisés pour cette publication.

Voici ce que j'ai jusqu'à présent, qui a été adapté de la première réponse à cette question: Filtrer une deuxième liste déroulante lorsqu'une valeur est choisie dans la première

Dans 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();
}

(Je suis conscient que le code pour construire les dates nécessite encore du travail pour afficher les dates appropriées.)

Et puis, dans le modèle de page:

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

Ce code me fait partie du chemin. Une fois que la liste déroulante #chooseEvent a une sélection, elle capture l'identifiant de publication approprié, puis la liste déroulante #chooseDate se vide de mon espace réservé mais ne charge jamais rien d'autre.

J'ai juste essayé d'avoir la fonction dynamic_dropdown_func () qui renvoie simplement un "Hello world!" et ça ne fait pas ça non plus, donc je pense que je ne déclenche pas et ne retourne pas correctement la fonction ajax.

custom-fieldajaxdropdown
1
John Chandler

Dans dynamic_dropdown_func(), à la fin, essayez echo $event_dates; au lieu de return $event_dates;.

Aussi, je me demande pourquoi vous déclarez global $wpdb; alors que vous ne semblez pas l'utiliser?

2
scott

Je préfère utiliser jQuery.ajax () over jQuery.post () , car il semble que je maîtrise davantage le traitement des erreurs.

Dans votre modèle de page, procédez comme suit:

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

Dans votre functions.php, procédez comme suit:

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

Notez l'utilisation de wp_send_json_success () et wp_send_json_error ()

0
Paul 'Sparrow Hawk' Biron