Soph87 Soph87 - 10 months ago 104
Ajax Question

WordPress AJAX load posts content in popup div

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.

vel vel
Answer Source

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');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download