WordPress AJAX load posts content in popup div - ajax

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

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

Answer 2

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