WordPress Dynamic Posts with AJAX

1 Views

I’m would like to make this code load using the post ID of the item clicked inside the internal UL. How can this be done?

Currently creates a side menu containing the specified categories.

Read More

After which it creates a ul sub menu within with each li being a post from the category. The post from the category is also inserted using ajax into the specified div.

I need for the posts that are shown in the div and side menu to also load into the div when they’re clicked.

Currently I am using cat ids to create the menu and insert into the div. I need to have post ids working from the sub menu.

It’s rather difficult to explain.

index.php 

<?php

  $args = array(
    'include' => '4,5,7,8'
  );
  $categories = get_categories($args); 

?>

<ul id="category-menu" class="nav nav-list">

  <?php

   foreach ( $categories as $cat ) { ?>

     <?php $show = 'cat=' . $cat->term_id; ?>
     <li id="cat-<?php echo $cat->term_id; ?>">
       <a class="<?php echo $cat->slug; ?> ajax tree-toggle" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#">
         <?php echo $cat->name; ?>
       </a>

       <ul class="nav nav-list tree" style="display: none">
         <?php query_posts($show); ?>
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
         <?php $post_id = $wp_query->post->ID; echo $post_id; ?>

         <li>
           <a class="ajax" onclick="cat_ajax_get('<?php echo $post_id ?>');" href="#"><?php the_title(); ?></a>
         </li>
         <?php endwhile; endif; ?>

       </ul>
     </li>

header.php 

<script>

  function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("current");
    jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //must echo it ?';
    jQuery.ajax({
      type: 'POST',
      url: ajaxurl,
      data: {"action": "load-filter", cat: catID },
      success: function(response) {
        jQuery("#category-post-content").html(response);
        return false;
      }
    });
  }

</script>

functions.php 

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );

function prefix_load_cat_posts () {

  $cat_id = $_POST[ 'cat' ];   $args = array (
    'cat' => $cat_id,
    'posts_per_page' => 10,
    'order' => 'DESC'
  );

  $posts = get_posts( $args );
  ob_start ();

  foreach ( $posts as $post ) {

    setup_postdata( $post ); ?>

    <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
      <h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <div id="post-content">
        <?php the_content(); ?>
      </div>
    </div>

    <?php
  }

  wp_reset_postdata();
  $response = ob_get_contents();   ob_end_clean();
  echo $response;
  die(1);
}
Post Views: 1

Related posts