How to get Advanced Custom Fields values with Ajax in Wordpress

Question

I'm trying to do a WP_query on a custom-post-type but for some reason I cannot get the values from the custom-field-types of these posts.

Here is what I got so far (functions.php)

function fetch_cases(){

$args = array(
    'post_type' => array('case'),
    'post_status' => array('publish'),
    'posts_per_page' => 5
);


$query = new WP_Query($args);
if($query->have_posts()) {
    while($query->have_posts() ){
        $query->the_post();
        ?>
       <a href="<?php the_permalink(); ?>">
            <div style="background-image:url('<?= get_field('case_picture'); ?>')">
                <p><?= get_field('case_title') ?></p>           
            </div>
        </a>
    <?php }
}
die();

add_action('wp_ajax_nopriv_fetch_cases', 'fetch_cases');
add_action('wp_ajax_fetch_cases','fetch_cases');
}

And in my JS file have the following:

$.ajax({
  url: "/wp-admin/admin-ajax.php",
  data: {
    action: "fetch_cases"
  },
  success: function(data) {
    $(".fetch_cases").append(data);
  },
  error: function(errorThrown) {
    console.log(errorThrown);
  }

});

Can someone tell me what I'm doing wrong?

I also tried to do:

<?php the_field('case_picture'); ?>

but with no luck? what am I missing?

Outsource WordPress · Accepted Answer · 2018-08-10 10:02:17Z

1

add_action() should be outside your custom function. Try this instead.

function fetch_cases(){
    $args = array(
        'post_type' => array('case'),
        'post_status' => array('publish'),
        'posts_per_page' => 5
    );

    $query = new WP_Query($args);

    if($query->have_posts()) {
        while($query->have_posts() ){
            $query->the_post();
            ?>
           <a href="<?php the_permalink(); ?>">
                <div style="background-image:url('<?= get_field('case_picture'); ?>')">
                    <p><?= get_field('case_title') ?></p>           
                </div>
            </a>
        <?php }
    }
    die();
}

add_action('wp_ajax_nopriv_fetch_cases', 'fetch_cases');
add_action('wp_ajax_fetch_cases','fetch_cases');

answered Aug 10, 2018 at 10:02

Outsource WordPress

3,8292 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakanksh Patel · Accepted Answer · 2018-08-10 09:40:59Z

you can use this logic by storing the field as a hidden value and pass in ajax through js

$query = new WP_Query($args);
if($query->have_posts()) {
    while($query->have_posts() ){
        $query->the_post();
        ?>
       <a href="<?php the_permalink(); ?>">
            <div style="background-image:url('<?= get_field('case_picture'); ?>')">
                <p><?= get_field('case_title') ?></p> 
                <input type="hidden" id="hidden" name="hidden_field" value="<?= get_field('case_picture'); ?>"> // store the value
            </div>
        </a>
    <?php }
}
die();

Now get the data in jquery and pass through ajax

<script>
    var hidden=//Grab data here.
    $.ajax({
  url: "/wp-admin/admin-ajax.php",
  data: {
    action: "fetch_cases",
    image:hidden, // Pass the data
  },
  success: function(data) {
    $(".fetch_cases").append(data);
  },
  error: function(errorThrown) {
    console.log(errorThrown);
  }
});
</script>

and use the data in ajax called

function fetch_cases()
  {
      $image=$_POST['image'];
  }

dipmala · Accepted Answer · 2018-08-10 09:47:20Z

0

get_field method has 2nd parameter which is post ID, pass this and check. It should work.

  $post_id = $post->ID;
  $value = get_field( 'case_picture', $post_id );

answered Aug 10, 2018 at 9:47

dipmala

2,0111 gold badge16 silver badges17 bronze badges

4 Comments

dipmala Over a year ago

do you get case_title value ?

dipmala Over a year ago

rename the field name may be same field name is used anywhere which you forgot.

ST80 Over a year ago

No, like the questions reads I do not get any values from the custom fields

dipmala Over a year ago

Looks like field name or any other plugin is conflict. I use same code but use only custom field and woocomerce plugin and its working properly. I prefer you to create new temporary group and give some different name and check with that. if not working then de-activate the plugins step by step.

Collectives™ on Stack Overflow

How to get Advanced Custom Fields values with Ajax in Wordpress

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related