Question 200514 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Ajax result not returning data

I have a WP project where I’m trying to do some ajax filtering but I’m having some trouble returning any data from my initial ajax call. I have a list of posts that are custom post types, and I’d to be able to filter them out (either by taxonomy, or and ACF field). I’m currently just trying to make one filter work correctly. No data is being returned though. Any idea what I’m doing wrong???

Here is my form:

<form data-ajax-url="<?php echo admin_url('admin-ajax.php'); ?>" action="<?php echo admin_url('admin-ajax.php'); ?>" method="POST" id="lot-filter" class="lot-form">
    <fieldset>
    <?php
            if( $terms = get_terms(array(
                'taxonomy' => 'neighborhood'
            )) ) :
                echo '<select class="input--select" id="choose-neighborhood" name="neighborhoodfilter">';
                echo '<option value="">' . 'All Communities' . '</option>';
                foreach ( $terms as $term ) :

                    echo '<option value="' . $term->term_id . '"' . (($term->term_id == '1') ? 'hidden' : '') . ($_POST['neighborhoodfilter'] == $term->term_id ? 'selected' : '' ) . '>' . $term->name . '</option>'; // ID of the category as the value of an option
                endforeach;
                echo '</select>';
            endif;
            ?>

        <button>Find Lots</button>
        <input type="hidden" name="action" value="lot_filter">
    </fieldset>
</form>

My ajax file included in my functions file:

<?php
add_action('wp_ajax_lot_filter', 'lot_filter_action'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_lot_filter', 'lot_filter_action');


function lot_filter_action()
{

    print($_POST);

    die();
}

And my JS(jquery) file:

(function ($) {
    $(document).ready(function () {
        let filter = $("#lot-filter");
        let data = filter.serialize();

        function submitFormFilter(e) {
            e.preventDefault();
            console.log(data);
            $.ajax({
                url: filter.data('ajaxUrl'),
                type: filter.attr('method'),
                data: data,
                success: function (result) {
                    console.log(result);
                    $('.response').html(result);
                },
                error: function (result) {
                    console.warn(result);
                }
            })
        }

        //Lot Search
        $('#lot-filter').submit(submitFormFilter);


    });
})(jQuery);

Once I get it working I will display the results via the ajax file, but until then I’m simply trying to see what being returned. My taxonomy has two neighborhoods. I’m expecting to see either some ‘riverview’ or ‘cherokee’ posts returned, but now just getting an empty array ($_POST).

Tags:

2

Answers


  1. 0

    jQuery’s default method is ‘GET’. Try changing $_POST to $_GET. See the documentation.

    Login or Signup to reply.
  2. 0

    I saw your codes
    only use "filter.serialize" function after form click to get all data like this :

    (function ($) {
$(document).ready(function () {
    let filter = $("#lot-filter");

    function submitFormFilter(e) {
       //move this line here
       let data = filter.serialize();
        e.preventDefault();
        console.log(data);
        $.ajax({
            type: 'post' ,
            url: filter.data('ajaxUrl'),
            data: data,
            success: function (result) {
                console.log(result);
                $('.response').html(result);
            },
            error: function (result) {
                console.warn(result);
            }
        })
    }

    //Lot Search
    $('#lot-filter').submit(submitFormFilter);


});
})(jQuery);

    if you need to send data to js file shoude use "wp_localize_script "

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search