WordPress AJAX load posts content in popup div

Question

Using WordPress, I'm trying to load my posts content in a popup div using AJAX, but I can't seem to be able to make it work. I think I'm on the right tracks, but I'm not really a developer, so I need some help!

I want to achieve something like this. So here's my (relevant) code so far:

In my page portfolio.php:

    <div id="popUp">
        <div class="fermePop">X</div>
        <div id="contenuPop"></div>
    </div>
    ...
     if ( $query->have_posts() ): ?>
                <div class="tagged-posts">
                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>" <?php post_class( 'tiles' ); ?> rel="<?php the_ID(); ?>">
                        <?php the_post_thumbnail(); ?>
                        <h2><?php the_title(); ?></h2>
                    </a>
                    <?php endwhile; ?>
                </div>

            <?php else: ?>
                <div class="tagged-posts">
                    <h2>No posts found</h2>
                </div>
            <?php endif; ?>

Single.php

<?php

 function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH'])
         && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

if (is_ajax()) {
   get_header();
} ?>

<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
    <div id="single-post post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <div class="contenu">
            <?php the_content(); ?>
        </div>
    </div>
<?php endwhile; ?>
<?php endif; ?>

<?php
if (is_ajax()) {
    get_footer();
}
?>

function.php

function ajax_load_projets(){
    wp_register_script('ajax_load_projets', get_template_directory_uri() . '/js/ajax-load-projets.js', false, null, false);
    wp_enqueue_script('ajax_load_projets');
    wp_localize_script('ajax_load_projets', 'load_projets_vars', array(
        'load_projets_ajaxurl' => admin_url('admin-ajax.php'),
        )
    );
}
add_action( 'wp_enqueue_scripts', 'ajax_load_projets' );

add_action('wp_ajax_load-single-post', 'prefix_ajax_single_post');
add_action('wp_ajax_nopriv_load-single-post', 'prefix_ajax_single_post');

function prefix_ajax_single_post() {
  $pid = (int) filter_input(INPUT_GET, 'pID', FILTSER_SANITIZE_NUMBER_INT);
  if ($pid > 0) {
    global $post;
    $post = get_post($pid);
    setup_postdata($post);
    printf('<div id="single-post post-%d">', $pid);
    the_title();
    the_content();
    echo '</div>';
  }
  exit();
}

And finaly, my JQuery script :

    jQuery(document).ready(function($) {
    $.ajaxSetup({cache:false});

    $(".tiles").click(function(event){

        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        var postID = $(this).attr('rel');
        var $container = $("#contenuPop");

        $('.filtre').show();
        $("#popUp").show();
        $container.html("Je charge!");

        data={
            action: 'prefix_ajax_single_post', 
            pID: postID, 
        };

        $.post(load_projets_vars.load_projets_ajaxurl, data, function(content) {
            $container.html(content);
        });
    });

    function fermePop(){
        $('.filtre').hide();
        $("#popUp").hide();
    }

    $(".filtre").click(function(){
        fermePop();
    });

    $(".fermePop").click(function(){
        fermePop();
    });

});

It's my first time using ajax, so I'm not sure what I'm doing wrong.

Answer 1

You're not getting the $pid correctly in the prefix_ajax_single_post() function. Since you're posting the data you can do:

$pid = $_POST['pID'];

Answer 2

Try this.

  function prefix_ajax_single_post() {

       $pid = $_REQUEST['pID'];
      if ($pid > 0) {
        global $post;
        $post = get_post($pid);
        setup_postdata($post);
        printf('<div id="single-post post-%d">', $pid);
        the_title();
        the_content();
        echo '</div>';
      }
      exit();
    }

    add_action('wp_ajax_prefix_ajax_single_post', 'prefix_ajax_single_post');
    add_action('wp_ajax_nopriv_prefix_ajax_single_post', 'prefix_ajax_single_post');