Support

Account

Home Forums Front-end Issues Field Content is not loading from Ajax call

Solving

Field Content is not loading from Ajax call

  • 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();
    }
  • 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.

  • 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!

  • 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);
    
  • I think you have putted e. preventDefault(); before ajax call that’s why its prevent calling of that function and your Ajax call will not call.

  • you need to localize first

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.