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!!

Solution 1

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!

Solution 2

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

Solution 3

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.

Read more about that here.

Comments

[Ico Portela]

Use a space between the commas and the point... $("#tabs").load(post_url + ' .tabcontent' );