Calling Advanced Custom Fields with AJAX/jQuery

Question

I am having a issue with ACF and AJAX: the custom fields aren't getting called into the AJAX portfolio when it loads.

I am relatively new to AJAX & PHP and not sure how to fix this.

add_action( "wp_ajax_eq_get_ajax_project", "eq_get_ajax_project" );
add_action( "wp_ajax_nopriv_eq_get_ajax_project", "eq_get_ajax_project" );

function eq_get_ajax_project() {

if ( !wp_verify_nonce( $_REQUEST['nonce'], "portfolio_item_nonce" ) ) {
    exit("No naughty business please");
}     

$grid_classes = 'grid_9 alpha';
$quality = 90;
$desired_width = 700;
$desired_height = 500;
$current_post_id = $_REQUEST['post_id'];
$video_embed_code = get_post_meta( $_REQUEST['post_id'], 'portfolio-video-embed', true );
$portfolio_images = eq_get_the_portfolio_images( $_REQUEST['post_id'] );
$terms = get_the_terms( $_REQUEST['post_id'] , 'portfolio_categories', 'string' );
$content_post = get_post( $_REQUEST['post_id'] );
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$post = get_post( $current_post_id ); 
$client = get_post_meta( $current_post_id, 'oy-client', true );
$project_url = get_post_meta( $current_post_id, 'oy-item-url', true );

ob_start();
?>

This is my jQuery file:

jQuery(document).ready(function( $ ) {

/*-----------------------------------------------------------------------------------*/
/*  Ajax Call
/*-----------------------------------------------------------------------------------*/

current_post_id = '';
var $projectWrapper = $("#project-wrapper"); 

eQgetProjectViaAjax = function(e) {

var post_id = $( this ).attr( "data-post_id" );
current_post_id = post_id;
var nonce = $( this ).attr( "data-nonce" );
var $prev = $( '.project-link[data-post_id="' + post_id + '"]' ).parent().parent().prev('.portfolio-item');
var $next = $( '.project-link[data-post_id="' + post_id + '"]' ).parent().parent().next('.portfolio-item');
var prev_item_id = '';
var next_item_id = '';

// Get the id's of previous and next projects
if ( $prev.length !== 0 && $next.length !== 0 ) {
    prev_item_id = $prev.find('.project-link').attr( "data-post_id" );
    next_item_id = $next.find('.project-link').attr( "data-post_id" );
} else if ( $prev.length !== 0 ) {
    prev_item_id = $prev.find('.project-link').attr( "data-post_id" );
} else if ( $next.length !== 0 ) {
    next_item_id = $next.find('.project-link').attr( "data-post_id" );
}

$(".single-img-loader").css( 'opacity', 1 );    
eQcloseProject();

$.ajax({
    type : "post",
    context: this,
    dataType : "json",
    url : headJS.ajaxurl,
    data : {action: "eq_get_ajax_project", post_id : post_id, nonce: nonce, prev_post_id : prev_item_id, next_post_id : next_item_id},
    beforeSend: function() {
        // Activate the overlay over the current project
        $( '.project-link[data-post_id="' + post_id + '"]' ).next('.blocked-project-overlay').addClass('overlay-active');

        if( !$.browser.opera ) {
            $.scrollTo(0, 500, { easing: 'easeOutCubic' });
        } else {
            $.scrollTo(0, 300, { easing: 'easeOutCubic' });
        }
    },
    success: function(response) {
    $projectWrapper.html( response['html'] );
    $projectWrapper.find('#portfolio-item-meta, #single-item').css( 'opacity', 0 );

    $("#single-item .single-img").load(function () { 
        $(this).stop().animate({ opacity: 1 }, 300); 
        $(".single-img-loader").stop().animate({ opacity: 0 }, 300); 
    });
},
complete: function() {
    eQopenProject();
    $( ".prev-portfolio-post, .next-portfolio-post" ).click( eQgetProjectViaAjax );
    $( '.prev-portfolio-post, .next-portfolio-post' ).click( showLoaderImg );
    $( ".close-current-post" ).click( eQcloseProject );             
    $( '#overlay' ).fadeOut(500);
    $projectWrapper.find('#portfolio-item-meta, #single-item').stop().animate({ opacity: 1 }, 400);
}
});

I think I have to somehow register the ACF in the AJAX/jQuery but I cannot find a way to accomplish that, and I have been searching for hours.

<?php get_field('project_name'); ?>

This is the field I need to call.

doublesharp · Accepted Answer · 2012-10-14 01:28:48Z

2

Assuming that you are using /wp-load.php to handle your AJAX call (the value of headJS.ajaxurl in your jQuery file), all of the plugins (including ACF) will be loaded, and any custom field add-ons in your functions.php as well. The get_field() method as you posted it assumes the current $post->ID from a page in the loop, but you can pass in a different post ID as the second argument to override this if you want. In your example, in your PHP file, it should read:

$project_name = get_field('project_name', $current_post_id);

You can read more in the docs here: http://www.advancedcustomfields.com/docs/functions/get_field/

answered Oct 14, 2012 at 1:28

doublesharp

27.9k6 gold badges56 silver badges76 bronze badges

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

Collectives™ on Stack Overflow

Calling Advanced Custom Fields with AJAX/jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related