WordPress

wp query — WP_query z filtrem ajax nie działa z polami wejściowymi

  • 15 lutego, 2024
  • 4 min read
wp query — WP_query z filtrem ajax nie działa z polami wejściowymi


Mam problem z zapytaniem podczas używania ajax do filtrowania postów. Mam stronę, na której ładowane są posty typu „activiteiten”, gdy niestandardowe pole start_date ma dzisiejszą datę lub datę w przyszłości. Dodano 3 pola filtrów:

  • pole wejściowe lokalizacji: powinno to sprawdzić, czy wprowadzony termin jest częścią niestandardowego pola lokalizacji
  • pole rozwijane (wybierz) z niestandardową taksonomią (typ zdarzenia)
  • pole wejściowe daty

Filtr rozwijany taksonomii działa dobrze, ale nie mogę połączyć go z innymi filtrami.

Szablon strony:

<div class="details__section activity__listing">
<div class="container">
    <div class="query_filter row">
        <div class="filter-block col">
            <label for="search-activities">Zoek op gemeente</label>
            <input type="text" name="search" class="search-activities" id="search-activities" placeholder="<?php _e('Zoek op gemeente', 'omg') ?>">
        </div>

        <?php $types = get_categories(array('taxonomy' => 'eventtype')); ?>
        <?php if (!empty($types)) { ?>
            <div class="filter-block col">
                <label for="cat-select">Type activiteit</label>
                <select class="filter-dropdown" id="type-select" name="type-select">
                    <option value="" selected=""><?php _e('Alle activiteiten', 'omg') ?></option>

                    <?php foreach($types as $type) { ?>
                        <option value="<?= $type->slug; ?>"><?= $type->name; ?></option>
                    <?php } ?>
                </select>
            </div>
        <?php } ?>

        <div id="myDatepicker" class="filter-block col datepicker">
            <div class="date">
                <label for="date-select"><?php _e('Datum', 'omg') ?></label>
                <input type="text" placeholder="dd/mm/jjjj" class="date-select" id="date-select" aria-describedby="date-description">
            </div>
        </div>
    </div>

    <?php
    $activities = new WP_Query(array(
        'post_type' => 'activiteiten',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'meta_value_num',
        'meta_key'  => 'start_date',
        'meta_value' => date('Ymd'),
        'meta_compare' => '>=',
        'meta_type' => 'DATE',
    ));
    ?>

    <?php if($activities->have_posts()) { ?>
        <div class="project-tiles">
            <?php while($activities->have_posts()) { $activities->the_post(); $f = get_fields();
                include 'template-parts/activiteit-detail.php';
            } ?>
        </div>
    <?php wp_reset_postdata(); } ?>
</div>

aplikacja.js

function filterActivities(e) {
    $(".project-tiles").addClass("loading");
    var location = $("#search-activities").val() // zoek op gemeente
    , date = $("#date-select").val() // datum
    , type = $("#type-select").val(); // Type activiteiten
    e && (datum = location = null,
    $("#search-activities, #date-select, #type-select").val("")),
    $.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        dataType: "html",
        data: {
            action: "filter_projects",
            locatie: location,
            datum: date,
            eventtype: type,
        },
        success: function(e) {
            $(".project-tiles").html(e),
            $(".project-tiles").removeClass("loading")
        }
    })
  }

Funkcje.php:

function filter_projects() {
    $location = $_POST['locatie'];
    $date = $_POST['datum'];
    $convertedDate = date('Ymd', strtotime($date));
    $type = $_POST['eventtype'];

    $meta_query = array('relation' => 'AND');

    if (isset($location)) {
        $meta_query[] = array(
            'key' => 'locatie',
            'value' => $location,
            'compare' => 'LIKE',
        );
    }

    if (isset($date)) {
        $meta_query[] = array(
            'key' => 'start_date',
            'value' => $convertedDate,
            'compare' => '=',
            'type' => 'DATE',
        );
    } else {
        $meta_query[] = array(
            'key' => 'start_date',
            'value' => date('Ymd'),
            'compare' => '>=',
            'type' => 'DATE',
        );
    }

    $tax_query = array('relation' => 'AND');
    if (isset($type)) {
        $tax_query[] =  array(
            'taxonomy' => 'eventtype',
            'field'    => 'slug',
            'terms'    => $type,
            'operator' => 'IN'
        );
    }  

    $ajaxposts = new WP_Query(array(
        'post_type' => 'activiteiten',
        'posts_per_page' => -1,
        'order' => 'ASC',
        'orderby' => 'meta_value_num',
        'meta_query' => $meta_query,
        'tax_query' => $tax_query,
    ));

    $response="";

    if($ajaxposts->have_posts()) {
      while($ajaxposts->have_posts()) { $ajaxposts->the_post();
        $response .= get_template_part('template-parts/activiteit-detail');
      }
    } else {
      $response="empty";
    }

    echo $response;
    exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

Jeśli sprawdzę zmienne wewnątrz mojej funkcji ($data, $typ, $lokalizacja), są one wypełnione poprawnymi informacjami, ale wygląda na to, że coś poszło nie tak, gdy próbuję połączyć te 3 filtry w zapytaniu ajax.

Warto przeczytać!  woocommerce offtopic — Jak naprawić ten „Nieprzechwycony błąd odniesienia: woodmartThemeModule nie jest zdefiniowany”?


Źródło