Home Ajax POST results show empty values - ACF
Reply: 0

Ajax POST results show empty values - ACF

user4877
1#
user4877 Published in June 20, 2018, 7:31 am

I've created an AJAX function to "Show More" custom post types when the user clicks the corresponding button. The function works and populated the page but returns empty values/elements. I am currently using ACF and attempting to store the data in variables to be used in my functions.php, but unfortunately to no success. Any thoughts?

Initial Script Enqueue function

function synchrony_theme_scripts() {
  wp_enqueue_script('main-js', get_template_directory_uri() . '/js/script.js', array('jquery'), '', true);

  wp_localize_script('main-js', 'team_ajax', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
  ));
}

Jquery AJAX Function

var count = 0;

function load_more_team(count) {

    var button = $('#more_posts'),
        count = count + 12,
        data =  {
            'action': 'ajax_more_team',
            'offset': count 
        }

    $.ajax({
        url: team_ajax.ajaxurl,
        data: data,
        type: 'POST',
        dataType: 'html',
        success: function(data){
            if(data.length){
                $("#ajax_posts").append(data);
                button.attr("disabled",false);
            } else{
                button.attr("disabled",true);
            }
        }
    });
    return false;
}

$('#more_posts').click(function() {
    $("#more_posts").attr("disabled",true);
    load_more_team();
});

AJAX Handler in Functions.php

function ajax_more_team($offset) {

$offset = $offset + 12;

header("Content-Type: text/html");

$args = array(
    'post_type' =>  'team',
    'posts_per_page'    =>  12,
    'offset'    =>  $offset
);

$the_query = new WP_Query($args);

$id = get_the_id(); 
$headshot = the_field('employee_headshot');
$name = the_field('employee_name');
$title = the_field('employee_title');
$company = the_field('employee_company');
$url = get_template_directory_uri();

$out = '';
    if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();
        $id = get_the_id(); 
        $name = the_field('employee_name');

        $out .= '<div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
                    <div class="team-member">
                        <a href="#" data-toggle="modal" data-target="#'.$id.'">
                            <img class="img-fluid" src="'.$headshot.'" alt="'.$headshot.'">
                        </a>
                        <div class="team-info">
                            <h6>'.$name.'</h6>
                        </div>
                        <a href="" data-toggle="modal" data-target="#myModal">
                            <div class="modal-icon">
                                <img class="img-fluid" src="'.$url.'/imgs/modal-icon.svg">
                            </div>
                        </a>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="'.$id.'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="team-close-btn">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <img class="img-fluid" src="'.$headshot.'" alt="Alice George">
                                    <div class="team-info">
                                        <h6>'.$name.'</h6>
                                        <p><strong>Title:<br></strong>'.$title.'</p>
                                        <p><strong>Company:<br></strong>'.$company.'</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>';
        endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_ajax_more_team', 'ajax_more_team');
add_action('wp_ajax_ajax_more_team', 'ajax_more_team');

?>

I added the $id and $name vars in the loop to test if the data is pulled and it populates, just does not include in the desired areas.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318567 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO