Clash Royale CLAN TAG#URR8PPP

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.

WP_query

custom-post-type

custom-field-types

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?

3 Answers
3

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



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

get_field

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


case_title

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

add_action()

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.