0

I've been using AJAX taxonomy/post filtering for the past week and just noticed something really strange upon further testing. When you select the filter criteria and click FILTER, it populates the proper posts; however, a random mix of the content that is populated has broken links in there custom metadata. Example: When you visit the Restaurants page, it shows ALL restaurants with all of the respective metadata for the custom post type (such as description, Featured Image, Website link, and social media links) until you click one of the filter criteria (like Delivery, Pet Friendly, etc.). Once you click the filter criteria and submit it, the filtered content loads; however, a random amount of the restaurants have broken website and/or social links. It's super strange. Upon inspection of the code in Chrome, it looks like the link doesn't break but instead closes before the icon element...something that doesn't happen UNTIL the AJAX script runs. See below for the code in various folders/files...You can also view a live example here: https://dpc.grgs.co/location-type/restaurants/.

Code in the CPT template which includes the filter form

<div class="col-md-12 location-content">
 <div class="filter__wrapper">
    <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
        <h2 class="filter__title">Filter Location Criteria</h2>
            <div class="categories-list">
                                <?php 
                                    $terms = get_terms( array( 'taxonomy' => 'restaurant-amenities', 'orderby' => 'name' ) );
                                    foreach ($terms as $term) {
                                        echo '<input type="checkbox" class="checkbox-select" name="categoryfilter2" value="'.$term->term_id.'"><span>'.$term->name.'</span></>';
                                    }
                                ?>
                            </div><!-- /.categories-list -->
                            <button>FILTER</button>
                            <input type="hidden" name="action" value="myfilter">
                        </form><!-- /#filter -->
                    </div><!-- /.filter__wrapper -->

                    <div id="response">
                        <div class="loc-list">
                            <div class="row">
                                <?php
                                        $loc_query_args = array(
                                                'post_type' => 'location',
                                                'post_status' => 'publish',
                                                'taxonomy' => 'location-type',
                                                'term' => 'restaurants',
                                                'nopaging' => true,
                                                'posts_per_page' => -1,
                                                'order' => 'ASC',
                                                'orderby' => 'title'
                                        )
                                ?>
                                <?php query_posts( $loc_query_args ); ?>
                                <?php if ( have_posts() ) : ?>
                                    <?php while ( have_posts() ) : the_post(); ?>
                                    <div class="col-lg-4 col-sm-6 loc-list__wrapper">
                                        <div class="loc-list__item"> 
                                            <?php the_post_thumbnail(array(300,200) ); ?>
                                            <h2 class="loc-list__title"><?php the_title(); ?></h2>
                                            <!--// Description //-->
                                            <?php if(get_field('dpc_description')) { ?>
                                                <div class="loc-list__description">
                                                    <?php echo get_field('dpc_description'); ?>
                                                </div><!-- /.loc-list__description -->
                                            <?php } ?>

                                            <div class="loc-list-details">
                                                <!--// Body Content //-->
                                                <?php the_content(); ?>

                                                <!--// Address //-->
                                                <div class="loc-list__address">
                                                    <?php
                                                        $state = get_field('dpc_state') === 'Florida' ? 'FL' : get_field('dpc_state');
                                                        if(get_field('dpc_street_number_route')) {
                                                            echo get_field('dpc_street_number_route');
                                                            if(get_field('dpc_city') || $state || get_field('dpc_postal_code')) {
                                                                echo '<br>';
                                                            }
                                                        }
                                                        echo get_field('dpc_city');
                                                        if(get_field('dpc_city') && $state) {
                                                            echo ', '; 
                                                        }
                                                        echo $state.' '.get_field('dpc_postal_code');
                                                    ?>
                                                </div><!-- /.loc-list__address -->

                                                <!--// Phone Number //-->
                                                <?php if(get_field('dpc_phone')) { ?>
                                                    <div class="loc-list-phone"><i class="fas fa-phone loc-list__icon"></i> <a href="tel:<?php echo get_field('dpc_phone'); ?>"><?php echo get_field('dpc_phone'); ?></a></div><!-- /.loc-list-phone -->
                                                <?php } ?>
                                                <!--// Website //-->
                                                <?php if(get_field('dpc_website')) { ?>
                                                    <div class="loc-list-website"><i class="fas fa-globe loc-list__icon"></i> <a target="_blank" href=<?php echo get_field('dpc_website'); ?>>Website</a></div><!-- /.loc-list-website -->
                                                <?php } ?>
                                                <!--// Map //-->
                                                <?php if(get_field('dpc_geometry')) { ?>
                                                    <div class="loc-list-map"><i class="fas fa-map-marker-alt loc-list__icon"></i> <a target="_blank" href="https://google.com/maps/?q=<?php echo get_field('dpc_geometry'); ?>">Map</a></div><!-- /.loc-list-map -->
                                                <?php } ?>

                                                <!--// Socials //-->
                                                <?php if(get_field('dpc_facebook') || get_field('dpc_twitter') || get_field('dpc_instagram')) { ?>
                                                    <div class="loc-list__socials">
                                                        <?php if(get_field('dpc_facebook')) { ?>
                                                            <a target="_blank" title="Facebook" href=<?php echo get_field('dpc_facebook'); ?>><i class="fab fa-facebook-square"></i></a>
                                                        <?php } ?>
                                                        <?php if(get_field('dpc_twitter')) { ?>
                                                            <a target="_blank" title="Twitter" href=<?php echo get_field('dpc_twitter'); ?>><i class="fab fa-twitter-square"></i></a>
                                                        <?php } ?>
                                                        <?php if(get_field('dpc_instagram')) { ?>
                                                            <a target="_blank" title="Instagram" href=<?php echo get_field('dpc_instagram'); ?>><i class="fab fa-instagram"></i></a>
                                                        <?php } ?>
                                                    </div><!-- /.loc-list__socials -->
                                                <?php } ?>

                                                <!--// Amenities //-->              
                                                <?php echo get_location_amenities($post); ?>
                                                <!--// Restaurant Amenities //-->
                                                <?php echo get_restaurant_amenities($post); ?>

                                            </div><!-- /.loc-list-details -->
                                        </div><!-- /.loc-list__item -->
                                    </div><!-- /.col-md-4 /.col-sm-6 ./loc-list-wrap -->

                                    <?php endwhile; ?>

                                <?php wp_reset_postdata(); ?>

                                <?php else : ?>
                                    <p class="loc-list-error"><?php _e( 'Sorry, no posts matched your criteria.', 'dpc' ); ?></p>
                                <?php endif; ?>
                            </div><!-- /.row -->
                        </div><!-- /.loc-list -->
                    </div><!-- /#response -->
                </div><!-- /.col-md-12 /.location-content -->

Code in functions.php

add_action('wp_ajax_myfilter', 'dpc_restaurant_amenity_filter'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'dpc_restaurant_amenity_filter');


        function dpc_restaurant_amenity_filter(){
            $args = array(
                'post_type' => 'location',
                'taxonomy' => 'location-type',
                'term' => 'restaurants',
                'posts_per_page' => -1,
                'orderby' => 'date', // we will sort posts by date
                'order' => $_POST['date'] // ASC или DESC
            );
            $relation = 'OR';
    if(!empty($_POST['categoryfilter2'] ) ) {
        $relation = 'AND';
    }
            // for taxonomies / categories
            if( isset( $_POST['categoryfilter2'] ) )
                    $args['tax_query'] = array(
                            'relation' => $relation, 
                            array(
                                    'taxonomy' => 'restaurant-amenities',
                                    'field' => 'id',
                                    'terms' => $_POST['categoryfilter2'],
                            ),
                    );

    query_posts( $args );

    if( have_posts() ) : ?>

            <?php
                    $args = array(
                            'post_type' => 'location',
                            'post_status' => 'publish',
                            'taxonomy' => 'restaurant-amenities',
                            'term' => $term->slug,
                            'nopaging' => true,
                            'posts_per_page' => -1,
                            'order' => 'ASC',
                            'orderby' => 'title'
                    )
            ?>
            <div class="loc-list">
                <div class="row">   
                    <?php while( have_posts() ): the_post(); ?>
                        <?php   get_template_part( 'template-parts/content', 'locations' ); ?>
                    <?php endwhile; ?>
            </div><!-- /.row -->
        </div><!-- /.loc-list -->
        <?php wp_reset_postdata(); ?>

    <?php else : ?>
        <p class="loc-list__error"><?php _e( 'Sorry, no posts matched your criteria.', 'dpc' ); ?></p>
    <?php endif;

    die();
}

Script for AJAX filtering

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('FILTER'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});

Any help is greatly appreciated!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.