FacetWP was unable to auto-detect the post listing : Having an issue with ACF load choices causing FacetWP error

Question

I have a project website in which I am using Facewp to list custom posts on which I attached a custom field using ACF. I am using Extended ACF to make frontend forms to create/update those post types. The issue I am having is that the filters I used on the archive page for those posts are not working when I put the Acf/load-field('custom-field) on theme function.php to dynamically populate the choices on the ACF frontend form. The FW filters show: FacetWP was unable to auto-detect the post listing.

I added facewp=>true on facewp queries. I am thinking that a solution to get these two to work without interfering would be to keep acf/load_field functions off the pages where the FacetWP filters are used but I cannot figure that out since acf/load_field seems to only work when loaded only in function.php which immediately affect the FacetWP filters. Can anyone give an idea?

the following is the ACF/load_field :

function acf_admin_enqueue( $hook ) {
    wp_enqueue_script( 'populate-awards', get_stylesheet_directory_uri() . '/assets/js/populate_grant_programs.js' );
   
    wp_localize_script( 'populate-awards', 'pa_vars', array(
          'pa_nonce' => wp_create_nonce( 'pa_nonce' ), // Create nonce which we later will use to verify AJAX request
        )
    );
  }
//add_action( 'admin_enqueue_scripts', 'acf_admin_enqueue' );
add_action('wp_enqueue_scripts', 'acf_admin_enqueue');

  // Return awards by grant project
function awards_by_grant_project( $selected_grant_project ) {
    // Verify nonce
    if( !isset( $_POST['pa_nonce'] ) || !wp_verify_nonce( $_POST['pa_nonce'], 'pa_nonce' ) ){
        die('Permission denied');
    }
    // Get grant project var
    $selected_grant_project = $_POST['grant_project'];
    // Get field from options page
    $org_post_id = get_post_id_for_organization();
    $projects = organizations_grant_projects();
    $grant_projects_listerr = $projects[ $org_post_id ];
    //var_dump($grant_projects_listerr); die();
    $grantproject_data = [];
    foreach( $grant_projects_listerr as $grant_project ){
        if( $grant_project[ 'project_title' ] == $selected_grant_project ){
            $grantproject_data[ 'awards' ] = [ $grant_project[ 'award_number' ] ];
            $grantproject_data[ 'grant_programs' ] = $grant_project[ 'grant_programs' ];
        }
    }
    return wp_send_json($grantproject_data);
    die();
  }
   
  add_action( 'wp_ajax_awards_by_grant_project', 'awards_by_grant_project' );
  add_action( 'wp_ajax_awards_by_grant_project', 'awards_by_grant_project' );
  add_action( 'wp_ajax_awards_by_grant_project', 'awards_by_grant_project' );```

The query for organization:

 function organizations_grant_projects(){
    $array_obj_of_orgs = array();
    $args = [
        'post_type' =>  'organizations',
        'meta_key'  => 'grant_projects_for_directory',
        'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby'   => 'post_title',
        'order' => 'ASC'
    ];
    $org_query = new WP_Query($args);
    if ( $org_query->have_posts() ) : 
        while ( $org_query->have_posts() ): $org_query->the_post();
            if( have_rows('grant_projects_for_directory') ):
                while( have_rows('grant_projects_for_directory' ) ) : the_row();
                    $array_of_grant_project[] = ['project_title' => get_sub_field('project_title'), 'award_number' => get_sub_field('list_of_award_numbers')[0] ['award_number'] ?? '', 'grant_programs' => get_sub_field('grant_programs')?? ''];
                endwhile;
            endif;
            $array_obj_of_orgs[get_the_ID()] = $array_of_grant_project;
        endwhile;
        wp_reset_postdata();
    endif;
    wp_reset_query();
    return $array_obj_of_orgs;
 }

Here is the link to the website filter pages: faceWp filter directory page and facewp filter library page.

if anyone would be willing to take a look I can share the admin access.

Answer 1

I thank you for taking a look at my issue if you did. I was able to get the issue resolved thanks to FaceWp support team. What I realized is that when you are usind facetwp plugin, and you are having an issue with filters not working when the refresh ajax is fired, just add a nonce to ajax, for some reason mine was failing.

Note that the main reason is for authentication described here. This resolved the issue I was having.

/*
 * Authentication for facet
 * Please note that caching may interfere with the NONCE,
 * causing AJAX requests to fail. Please DISABLE CACHING for facet pages,
 * or set the cache expiration to < 12 hours!
*/

add_action( 'wp_footer', function() {
  ?>
    <script>
      document.addEventListener('facetwp-loaded', function() {
        if (! FWP.loaded) { // initial pageload
          FWP.hooks.addFilter('facetwp/ajax_settings', function(settings) {
            settings.headers = { 'X-WP-Nonce': FWP_JSON.nonce };
            return settings;
          });
        }
      });
    </script>
  <?php
}, 100 );