CODEWITHSUNDEEP
ajaxwordpresscustom-post-typeadvanced-custom-fields
ST80
ST80

Reputation: 3903

How to get Advanced Custom Fields values with Ajax in Wordpress

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?

Upvotes: 1

Views: 5610

Answers (3)

Outsource WordPress
Outsource WordPress

Reputation: 3799

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');

Upvotes: 1

dipmala
dipmala

Reputation: 2011

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 );

Upvotes: 0

Aakanksh Patel
Aakanksh Patel

Reputation: 623

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'];
  }

Upvotes: 0

Related Questions