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
– Ohgodwhy, Commented Mar 14, 2013 at 6:10
You have to include wp-blog-header.php in the javascript side. — Arslaan Ejaz
– Arslaan Ejaz, Commented Mar 14, 2013 at 7: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
– Arslaan Ejaz, Commented Mar 14, 2013 at 7:46
@Ohgodwhy I was going to add something like: <a href="post-<?php the_ID(); ?>"><?php the_post_thumbnail('Project'); ?></a> to the .mytab class — user2168388
– user2168388, Commented Mar 18, 2013 at 23:11
I basically want to load a single post onclick using AJAX. Thanks! — user2168388
– user2168388, Commented Mar 18, 2013 at 23:15

user2168388 · Accepted Answer · 2013-03-19 00:24:49Z

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!

Barry Ramsay · Accepted Answer · 2014-04-10 16:49:33Z

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, 2014 at 16:49

Barry Ramsay

3102 silver badges8 bronze badges

1 Comment

Ico Portela Over a year ago

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

J May · Accepted Answer · 2015-11-16 23:04:43Z

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.

Collectives™ on Stack Overflow

How to load Wordpress Post with Ajax onclick

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related