2

I'm using ajax to filter a list. The filter works as it should most of the time, but for some queries it returns a blank result. When this happens, the error in the console is:

PHP Errors in Ajax Response

from a file called query-monitor.js.

Filter JS:

jQuery(function($){
    const search = $('#search');

    search.submit(function(e){
        e.preventDefault();
        update_results($(this));
    });
});

function update_results (filter) {
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        success:function(data){
            $('#models-container').html(data); // insert data
        }
    });
    return false;
}

The update_results function populates the element #models-container with the results. The item I'm describing as "blank" has all the html, but none of the data.

methods.php (filter function only) - this function filters the "Models" by searching through title, content, and category - then combines all 3 queries:

// models filter ajax
add_action('wp_ajax_modelfilter', 'category_filter');
add_action('wp_ajax_nopriv_modelfilter', 'category_filter');

function category_filter(){
  $args = array(
    'orderby' => 'post_title',
    'order' => 'ASC',
    'post_type' => 'models',
    'posts_per_page' => -1,
    'ignore_custom_sort' => true
  );
 
  // for taxonomies / categories
  if( isset( $_POST['modelcategories'] ) ) {
    if ( $_POST['modelcategories'] != 'all' ) {
      $args['tax_query'] = array(
        array(
          'taxonomy' => 'model-categories',
          'field' => 'id',
          'terms' => $_POST['modelcategories']
        )
      );
    }

    $query = new WP_Query( $args );
  }

  if ( isset( $_POST['modelsearch'] ) ) {
    $title_search = $args;
    $content_search = $args;
    $cat_search = $args;

    // search by title
    $title_search['s'] = $_POST['modelsearch'];
    // search by content
    $content_search['meta_query'] = array(
        array(
           'key' => 'preview_text',
           'value' => $_POST['modelsearch'],
           'compare' => 'LIKE'
        )
    );
    // seach by category
    $cat_search['tax_query'] = array(
      array(
        'taxonomy' => 'model-categories',
        'field' => 'name',
        'terms' => $_POST['modelsearch']
      )
    );
    

    $q1 = new WP_Query($title_search);
    $q2 = new WP_Query($content_search);
    $q3 = new WP_Query($cat_search);

    $query = new WP_Query();
    // combine title content and category queries
    $query->posts = array_unique( array_merge( $q1->posts, $q2->posts, $q3->posts ), SORT_REGULAR );
    $query->post_count = count( $query->posts );
  }

 
  $html = '';
  
  if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
        $is_new = get_field('is_new');
        $title  = get_the_title();
        $copy   = get_field('preview_text');
        $image  = get_field('image');

        if ($is_new) :
          $html .= '<div class="model-card new">';
        else :
          $html .= '<div class="model-card">';
        endif;

        if ($image) :
          $html .= '<img class="model-card-image" src="' . $image['url'] . '" alt="' . $image['alt'] . '">';
        endif;

        $html .= '<div class="copy-area">';
        $html .= '<h2 class="model-card-title">' . $title . '</h2>';
        
        if ($copy) :
          $html .= '<p class="model-card-copy">' . $copy . '</p>';
        endif;

      $html .= '</div>';
      $html .= '</div>';

    endwhile;
  else:
    echo "Nothing to show.";
  endif;

  echo $html;
  
  die();
}

Let me know if I'm missing important information in my question. If there's a good way to troubleshoot this, please provide it in the comments!

5
  • You will likely have to Enable Debugging to narrow down your issue. Your console says PHP Errors in Ajax Response but your question doesn't show any PHP.
    – Howdy_McGee
    Commented Jan 23, 2023 at 15:16
  • there's no PHP in your question to debug, can you update your question to include it? Also check your PHP error log to see if the error messages it's referring to are in there, Query Monitor might also be displaying the information to be helpful to you if you open that up
    – Tom J Nowell
    Commented Jan 23, 2023 at 15:29
  • @TomJNowell I've added the php in question. How do I look at the Query Monitor? Commented Jan 23, 2023 at 15:33
  • did you not install the query monitor plugin? It's a developer tool plugin that lists debugging information, and sits in the top toolbar. If what it says is true then it's going to be lit up like a christmas tree and shaded in red/orange and always visible. Also I see you've added the PHP for the form, but you haven't added the PHP for the code that has the problem, if you're having issues with an AJAX request, we need to see the code for the AJAX request, as well as any error messages it produces
    – Tom J Nowell
    Commented Jan 23, 2023 at 15:36
  • @TomJNowell thank you - I was missing the most important piece from the AJAX function, adding it now. I didn't know Query Monitor was a plugin (I inherited this site), so thank you - I'm making progress here thanks to all the help Commented Jan 23, 2023 at 16:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.