Wordpress load post details and content via ajax in a div

Question

I have stored the post-id info in a data-* attribute, I wish to display this content in a div via &.ajax() function. this is the code I'm working on.

A list item that display the post thumb

<li class="homus-partners-section-single" data-post-id="<?php the_ID(); ?>">
    <?php the_post_thumbnail(); ?>
</li>

the div where i want to display the item

<div class="homus-partners-detalis">
    <div class="homus-partners-detalis-img">
        <?php the_post_thumbnail(); ?>
    </div>
    <div class="homus-partners-detalis-info">
        <h4>
            <?php the_title(); ?>
        </h4>
        <p>
            <?php the_content(); ?>
        </p>
    </div>
</div>

the ajax function

$(document).delegate('li.homus-partners-section-single', 'click', function(event) {
    event.preventDefault();
    var pb_post_id = $(this).data('post-id');
    var data = {
        'action': 'GetPost',
        postURL : pb_post_id,
    };
    $.post(ajaxURL, data, function(response) {
        $( '.homus-partners-detalis' ).html(response);
    });

});

the php function

function GetPost(){
    $cat = $_POST['catURL'];
    get_template_part($cat);
    exit();
}
add_action('wp_ajax_nopriv_GetPost', 'GetPost');

EDIT 2

now my code look like this but i have no answer

markup of the clickable element

<li class="homus-partners-section-single" data-post-slug="<?php echo $post->post_name;?>">
<?php the_post_thumbnail(); ?>

div where i want to display the item

 <div class="homus-partners-detalis">
   <?php get_template_part('single_pb_post_details'); ?>
 </div>

php i'm calling in the div

  <div class="homus-partners-detalis-img">
    <?php the_post_thumbnail(); ?>
 </div>
 <div class="homus-partners-detalis-info">
 <h4>
   <?php the_title(); ?>
 </h4>
 <p>
  <?php homus_excerpt('homus_pb_excerpt'); ?>
</p>
</div>

ajax function

 $(document).delegate('li.homus-partners-section-single', 'click', function(event) {
  event.preventDefault();
  var pb_post_slug = $(this).data('post-slug');
  var data  = {
  'action': 'GetPostDetails',
   postURL : "single_pb_post_details.php?slugid="+ pb_post_slug,
  };
 $.post(ajaxURL, data, function(response) {
    $( '.homus-partners-detalis' ).html(response);
    alert('Got this from the server: ' + response);

 });

});

the php function

function GetPostDetails(){
   $details = $_POST['postURL'];
   get_template_part($details);
exit();
}
add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');

Your GetPost will only return, what? You need to put something to output there, so that there is something in the response of the ajax call... — dingo_d
– dingo_d, Commented Feb 29, 2016 at 10:17
This: .load("../single_pb_post_details.php?slugid=" + pb_post_slug); Is not a good way to load your .php file. Use wp_localize_script instead. — dingo_d
– dingo_d, Commented Feb 29, 2016 at 10:41
i edited the php functin like this function GetPostDetails(){ $details = $_POST['postURL']; get_template_part($details); exit(); } add_action('wp_ajax_nopriv_GetPost', 'GetPostDetails'); but the only answere i have is a zero — Nicola Bertelloni
– Nicola Bertelloni, Commented Feb 29, 2016 at 10:53
0 usually happens if you didn't use die() or exit() in your output (the php function that you call in ajax). — dingo_d
– dingo_d, Commented Feb 29, 2016 at 10:54

Felipe Elia · Accepted Answer · 2016-02-29 13:42:03Z

As get_template_part just accepts the name of the file without extension, in the comments we've reached this code:

$(document).delegate('li.homus-partners-section-single', 'click', function(event) {
    event.preventDefault();
    var pb_post_slug = $(this).data('post-slug');
    var data  = {
        'action': 'GetPostDetails',
        postURL : "single_pb_post_details",
        post_id : pb_post_slug
    };
    $.post(ajaxURL, data, function(response) {
        $( '.homus-partners-detalis' ).html(response);
        alert('Got this from the server: ' + response);
    });
});

the php code that responds to ajax request:

function GetPostDetails(){
    get_template_part($_POST['postURL']);
    wp_die();
}
add_action('wp_ajax_GetPostDetails', 'GetPostDetails');
add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');

and in the template file you can check the post_id value with:

$_POST['post_id'];

@FelipeWlia helped me out, but we can't figure out why the post content is still not displayng
Why is there $_POST['postURL'] inside of get_template_part ?
@Daniel this is quite old... if OP doesn't intend to reuse it for another stuff, that var would have always the same value, so he could call get_template_part( 'single_pb_post_details' );. I hope @NicolaBertelloni had found his way to the right answer...

Collectives™ on Stack Overflow

Wordpress load post details and content via ajax in a div

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related