How to load Wordpress Post with Ajax onclick

Question

I have spent hours reading and trying tutorials. I cant seem to find a solution that works and I know it should be pretty easy but I struggle with AJAX. :(

I want to load Post content from a link in a div. Below is what I have. Can someone please help me with the JavaScript side? Thanks!

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

I want to load this code in div #loadAjaxHere

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

Thank you for the help!!

What are you using to define which post you want to retrieve? what is the element that has the click function attached to it? are you familiar with the functions.php file? — Ohgodwhy, Mar 14 '13 at 06:10
You have to include wp-blog-header.php in the javascript side. — arslaan ejaz, Mar 14 '13 at 07:40
Try: $folder = substr(substr($_SERVER["REQUEST_URI"],1), 0, strpos(substr($_SERVER["REQUEST_URI"],1), "/")); $ajax_url = realpath($_SERVER["DOCUMENT_ROOT"]).'/'.$folder.'/wp-blog-header.php'; require($ajax_url); at the top of your external ajax request page. — arslaan ejaz, Mar 14 '13 at 07:46
@Ohgodwhy I was going to add something like: to the .mytab class — user2168388, Mar 18 '13 at 23:11
I basically want to load a single post onclick using AJAX. Thanks! — user2168388, Mar 18 '13 at 23:15

score 10 · Accepted Answer · answered Mar 19 '13 at 00:24

Ok, I think I have solved this after a long process of trial and error.

This seems to work, but please let me know if it is not the correct way of doing this

Javascript:

jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    });
});

The page where I want to display the post content (I am using custom post types called "artwork":

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

And the single post "single-artwork.php". Note: Dont use get_header or get_footer etc:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

Thanks!

score 3 · Answer 2 · answered Apr 10 '14 at 16:49

3

Just to add, if you only want to load in part of the single post you can ammend

$("#tabs").load(post_url);

to

$("#tabs").load(post_url + ".tabcontent" );

Which would just load in everything in the div.tabcontent

answered Apr 10 '14 at 16:49

Barry Ramsay

310
2
8

Use a space between the commas and the point... $("#tabs").load(post_url + ' .tabcontent' ); – Ico Portela Jan 23 '17 at 18:02

score 3 · Answer 3 · answered Nov 16 '15 at 23:04

Barry's answer is correct about being able to load a partial page by adding a css selector expression to the end of the URL. However, there would need to be a space between the url and the selector like so:

$("#tabs").load(post_url + " .tabcontent" );

Otherwise the string passed to .load() would be http://example.com.tabscontent. But it should be http://example.com .tabscontent.

Also, a word to the wise, using this method will stop jQuery from loading and executing any code inside <script> tags. However, just using .load(post_url); without a selector would successfully load and execute code in <script> tags.

How to load Wordpress Post with Ajax onclick

3 Answers3

Linked