0

Sorry for the long read probably...

I hope you guys can help me out. Im trying to display a taxonomy list that will load the content of that taxonomy in the same post as the main post page.

I have been looking at this script, found on this website (How to load Wordpress Post with Ajax onclick).

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; ?>

Im not using the last part of the script because im already working in single-{slug}.php

This actually opens the taxonomy content in the same window, just like i want. But this shows the thumbnail as a link.

What i really want is to just have the taxonomy list which will then open en show the content in the #tabs div.

So far i got this:

<a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php echo get_the_term_list( $post->ID, 'inclusief'); ?></a>

which shows the taxonomy list like i want. But this opens the content of that taxonomy on a new page and not in the #tabs. What is doing this... and why. And ofcourse how can i let this taxonomy content open in the #tabs div...

Thanks!

Community
  • 1
  • 1
Steggie
  • 525
  • 8
  • 31

1 Answers1

0

Well, I fixed it by using a custom get_terms_list function. The problem was that the class="ajax" wasnt given to the link. By creating a custom function that does give the ajax class to the link. The post opens in the #tabs div.

function get_the_term_list_custom( $id, $taxonomy, $before = '', $sep = '', $after = '' ) {
$terms = get_the_terms( $id, $taxonomy );

if ( is_wp_error( $terms ) )
    return $terms;

if ( empty( $terms ) )
    return false;

$links = array();

foreach ( $terms as $term ) {
    $link = get_term_link( $term, $taxonomy );
    if ( is_wp_error( $link ) ) {
        return $link;
    }
    $links[] = '<a class="ajax" href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>';
}

/**
 * Filter the term links for a given taxonomy.
 *
 * The dynamic portion of the filter name, `$taxonomy`, refers
 * to the taxonomy slug.
 *
 * @since 2.5.0
 *
 * @param array $links An array of term links.
 */
$term_links = apply_filters( "term_links-$taxonomy", $links );

return $before . join( $sep, $term_links ) . $after;

}

That was it... Im happy!

Steggie
  • 525
  • 8
  • 31