Calling in Post Content via AJAX

Question

I've been trying to figure this out for about a week and I've got a few different methods that 'work' but I don't feel like are the best/right solutions for the project.

I'm trying to do the following: I've got grid items that are populated via the WP Posts loop. The grid items themselves are then wrapped in an tag wherein the post ID is grabbed as a data attribute like so:

            <section class="GRIDSECTION">

                <?php 
                    query_posts('post_type=CUSTOMTYPE');
                    while (have_posts()) : the_post(); 
                    $postID = get_the_ID(); 
                ?>

                <a class="GRIDITEM" href="#" data-post_id='<?php echo $postID; ?>' data-post_type='POST-TYPE'>

                    <h2><?php the_title(); ?></h2>

                    <span><?php the_field('CUSTOM-CONTENT');?></span>

                </a>

                <?php 
                    endwhile;      
                ?>
            </section>

And then my AJAX script based on some of the reading I've done:

console.log('01 - AJAX Loaded');

$(".GRIDITEM").click(function () {

    console.log('02 - AJAX Starting');

    //var id_post = $(this).attr('post_id');
    $.ajax({
        type: 'POST',
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data: {
            'post_id': ?????,
            'action': 'f711_get_post_content' //this is the name of the AJAX method called in WordPress
        }, success: function (result) {
            console.log('03a - SUCCESS');
           alert(result);
        },
        error: function () {
            alert("error");
            console.log('03b - FAILURE');
        }
    });

});

I'm not sure how to connect pass the ID into the data type with this method. I figured once I manage to get the post_id passed in, I can do the same thing for the POST-TYPE.

What I intend to do is pass the Post ID and the Custom Post Type into Ajax to send and receive the Post that the GRIDITEM represents.

And then of course, return back to where I started.

Here's the overall feel I want to achieve.

http://tympanus.net/Development/AnimatedGridLayout/

But since we use custom post types and custom fields in each post, I'm not sure how to call that in. Plus I've only just started using AJAX.

Thanks!

Answer 1

Replace ????? with <?php echo $postID; ?>

I'm assuming your two snippets are in the same WP generated page?

Answer 2

You can get the post ID by using the following:

jQuerypostid = jQuery(this).attr('data-post_id');

Same you can do for post type also.

Answer 3

I took Andy Macaulay-Brook's snippet and expanded on it after some further research.

Here's what worked for me.

PHP

add_action( 'wp_ajax_nopriv_ajax_load_more', 'ajax_load_more' );
add_action( 'wp_ajax_ajax_load_more', 'ajax_load_more' );

function ajax_load_more(){
    //load more posts
    $post_id = $_POST["post_id"];

$query = new WP_Query( array(
    'p' => $post_id,
    'post_type' => 'any'
) );

if( $query->have_posts() ):

    while( $query->have_posts() ): $query->the_post();

        the_title();

    endwhile;

endif;

wp_reset_postdata();

    die();

};

and the js

console.log('ajax script ready');
$(document).on('click','.ajax-button', function(){

    var that = $(this);
    var post_id = that.data('post_id');
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

    $.ajax({

        url : ajaxurl,
        type: 'post',
        //dataType: 'json',
        data : {

            post_id : post_id,
            action : 'ajax_load_more'

        },
        error : function(response){
            console.log(response);
        },
        success : function(response){

            $('#load_here').append( response );

        }

    });

});

I'm still trying to figure some other things out with the way the response gets parsed out, but one step at a time. This was enough to get me on to the next stage.

Thanks everyone!