How to load Wordpress Post with Ajax onclick

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!

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

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.