Field Content is not loading from Ajax call

• hksans77

• January 5, 2021 at 5:03 am

I am working on a toggle between list and grid view and have set up an Ajax call on button click to serve the list or grid template part via get_template_part function. The HTML from the template is outputting to the page, but none of the custom field content is rendering.
Hoping someone can help me figure out what I am missing.

<div class="text-lg w-full view-toggles">
       <a id="list-view-button" name="view-button" data-value="list">List View</a>
       <a id="grid-view-button" name="view-button" data-value="grid">Grid View</a>            
  </div>

function add_this_script_footer(){ ?>
<script type="text/javascript">
  jQuery(document).ready(function($) {

    $( 'a[name=view-button]' ).on('click', function() {
        var activeView = $(this).data('value');
          console.log(activeView);
          
      $.ajax({
          type: 'GET',  
          url: '<?php echo admin_url('admin-ajax.php');?>',  
          data: {
              'action':'toggle_view',
              'activeView' : activeView
          },
          success:function(data) {
              $("#view-container").html(data);
          },

          error: function(errorThrown){
              window.alert(errorThrown);
          }
      });
    });
  });  

</script>
<?php }
add_action('wp_footer', 'add_this_script_footer');

add_action( 'wp_ajax_toggle_view', 'toggle_view' );
add_action( 'wp_ajax_nopriv_toggle_view', 'toggle_view' );

function toggle_view() {
    if ( isset($_REQUEST) ) {
        $view = $_REQUEST['activeView'];
      
        if ( $view == 'list' ) {
            get_template_part('partials/view', 'list');
       } elseif ( $view == 'grid' ) {
            get_template_part('partials/view', 'grid');
        }
    }
  
   die();
}

• John Huebner

• January 5, 2021 at 8:46 am

Is the above code in your functions.php file?

Also, during an ajax request the global $post will not be set. You will need to pass this value as part of your request and you will need to supply the post ID argument in all of your ACF function calls.

• hksans77

• January 7, 2021 at 2:17 am

Hi John,
The above code is in my functions.php file. I wanted to get it working before separating out the JS into a separate file. I am a beginner in terms of my AJAX knowledge, so I am not sure I know how to to the $post suggestion you’ve made. Is there some support document for supplying post ID arguments in ACF function calls? Thank you for your help!

• John Huebner

• January 7, 2021 at 4:57 am

So, what you need to do is to localize the script. For a JS file you would use this https://developer.wordpress.org/reference/functions/wp_localize_script/

With the script being output to the page what you can do is just echo out the post ID, see my additions.

function add_this_script_footer(){ 
// reference global
global $post;

?>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    
    // output post id to page
    var post_id = <?php echo $post->ID; ?>;

    $( 'a[name=view-button]' ).on('click', function() {
        var activeView = $(this).data('value');
          console.log(activeView);
          
      $.ajax({
          type: 'GET',  
          url: '<?php echo admin_url('admin-ajax.php');?>',  
          data: {
              'action':'toggle_view',
              'activeView' : activeView,
              // pass post ID back in AJAX Request
              'post_id': post_id
          },
          success:function(data) {
              $("#view-container").html(data);
          },

          error: function(errorThrown){
              window.alert(errorThrown);
          }
      });
    });
  });  

</script>
<?php }

Then in the template part you need to see if an ajax request is being done and if it is then get the post ID.

// assign post ID from global not doing ajax
// and from request if you are
$post_id = false;
if (defined('DOING_AJAX') && DOING_AJAX) {
  if (isset($_GET['post_id'])) {
    $post_id = $_GET['post_id'];
  }
} else {
  $post_id = $post->ID;
}

Then in all of the ACF function calls you supply the post id

$value = get_field('field-name', $post_id);