I am looking for a solution/guidance on how I might have links of posts listed in a hierarchical manner in a left column of a template and when a link is chosen it loads a post in the right column but the whole page does not refresh?
Thanks, Deon
Update for Marfarma's help below
Thank you for the response. After reading many pages and posts I was able to get it to work. My one caveat now is that links that are in the right hand column have an href value of #. I have the home page setup for a user to choose a training path which takes them to the page discussed above. But I also have the individual links on the home page in case a user wants to jump to a specific topic. So now my issue is I can code them individually and have them go to the single post template, but I would rather a user go to the page discussed above with the correct link topic chosen from the list. Do you know how this might be accomplished? I assume first step somehow instead of having the # as the href I have to pass along the correct id/post slug as the href? Then somehow I can link to that all done through javascript? Thanks for any help. The code I used is below.
<?php
wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri( __FILE__ ) . '/js/ajax.js' );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
?>
<?php
global $wpdb;
global $post;
$querystr = "
SELECT * FROM $wpdb->posts
LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
WHERE $wpdb->terms.name = 'pathologist'
AND $wpdb->term_taxonomy.taxonomy = 'category'
AND $wpdb->posts.post_status = 'publish'
AND $wpdb->posts.post_type = 'post'
AND $wpdb->postmeta.meta_key = 'order'
ORDER BY $wpdb->postmeta.meta_value ASC
";
$pageposts = $wpdb->get_results($querystr, OBJECT);
?>
<?php if ($pageposts): ?>
<?php global $post; ?>
<div class="textwidget">
<ul id="nav">
<li class="list-title">Navigating your Workspace</li>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<li class="post" id="<?php the_ID(); ?>">
<a href="#" class="ajax-click" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
And the ajax.js for above.
jQuery(document).ready(function() {
jQuery(".ajax-click").click(function() {
jQuery("#loading-animation").show();
var post_id = $(this).parent("li").attr("id");
var ajaxURL = MyAjax.ajaxurl;
jQuery.ajax({
type: 'POST',
url: ajaxURL,
data: {"action": "load-content", post_id: post_id },
success: function(response) {
jQuery("#container-help-page").html(response);
jQuery("#loading-animation").hide();
return false;
}
});
});
});