Admin-ajax 403 (Forbidden)

Hi

I’ve inherited a Sage website so still trying to get used to it all. In the long run I think I’m really going to like it.

Im having an issue when trying to filter my posts with Ajax and can’t seem to fix it.

I’ve got wp_localize_script set up to get my admin-ajax.php which works fine in console log when testing.

Post Filter

    /**
 * Post Filter
 */
if (!function_exists(__NAMESPACE__ . '\\filter_posts')) :
    function filter_posts()
    {
        ?>
        <div class="post-filter">
            <form method="POST" id="filter" class="row post-dropdowns case-study-filters">
              <div class="col-md-6 filter">
                <p>Filter by: <span class="invisible-select">
                  <?php wp_dropdown_categories(
                    array(
                        'taxonomy' => 'cs_sections',
                        'orderby' => 'name',
                        'show_count' => false,
                        'show_option_all' => 'All (Default)',
                        'hide_empty' => 0,
                        'name' => 'categoryfilter',
                    ))
                  ?>
                  </span>
                </p>
              </div>
              <input type="hidden" name="action" value="myfilter">
            </form>
        </div>
        <?php
    }
endif;

Post Filter Function

/**
 * Post filter function
 */
function post_filter_function()
{
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC or DESC
    );

    // for taxonomies / categories
    if (isset($_POST['categoryfilter']))
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'cs_sections',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );

    $query = new \WP_Query($args);

    if ($query->have_posts()) :
        //echo '<div class="row">';
        while ($query->have_posts()): $query->the_post(); ?>
        <article <?= post_class('col-sm-6 col-md-4 col-lg-3 news-item') ?>>
          <a href="<?= get_permalink(); ?>">
            <div class="inner">
        			<div class="image">
        				<?php if(has_post_thumbnail()) :
        				  the_post_thumbnail('news');
        				else:
        					Nav\get_placeholder_image();
        				endif; ?>
        			</div>
            </div>
            <div class="lining">
      				<h4><?= get_the_title() ?></h4>
      				<div class="entry">
      					<?= the_excerpt() ?>
      				</div>
      				<p class="read-more">View</p>
      			</div>
      			<div class="location">
      				<?php $loc = get_post_meta($post->ID,'_case_study_location',true);
      				if($loc) : ?>
      					<p><span class="icon icon-location-pin"></span><?= $loc ?></p>
      				<?php endif; ?>
      			</div>
          </a>
        </article>
        <?php endwhile;
      // echo '</div>';
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;

    die();
}

add_action('wp_ajax_myfilter', __NAMESPACE__ . '\\post_filter_function');
add_action('wp_ajax_nopriv_myfilter', __NAMESPACE__ . '\\post_filter_function');

Custom archive

<div class="container-fluid">
    {!! App\filter_posts() !!}
    <div id="blog-posts" class="list row grid-layout index-grid">
      @while (have_posts()) @php the_post() @endphp
        @include('partials.content-case-study')
      @endwhile
      @php wp_reset_query() @endphp
    </div>
  </div>

Common JS

/**
     * AJAX filter functionality
     */
    $('#categoryfilter').change(function () {
        var filter = $('#filter');
        $.ajax({
            // eslint-disable-next-line no-undef
            url: themePaths.ajax_url,
            data: filter.serialize(), // form data
            type: filter.attr('method'), // POST
            beforeSend: function () {
                // check if all categories is selected
                if (filter.serialize().indexOf('categoryfilter=0') !== -1) {
                    location.reload();
                }
                // eslint-disable-next-line no-undef
                console.log(themePaths.ajax_url);
            },
            success: function (data) {
                $('#blog-posts').html(data); // insert data
            },
        });
        return false;
    });

Console log is returning the admin-ajax.php file, but Im also getting 403 forbidden error.

I’ve also tried the same code on a non Sage custom theme and it worked. Any idea where I may have gone wrong? Any help is very much appreciated.

This topic was automatically closed after 42 days. New replies are no longer allowed.