2

Currently pulling in my posts on to a static page via ajax and a wp page template.

<?php get_header(); ?>

<div class="row">

<div class="col-md-6 feed-left">
<div id="post-list"></div>
</div>

<div class="col-md-6 feed-right">
<div id="post">Stuff</div>
</div>

</div>

<script>
var $b = jQuery.noConflict();
 $b(document).ready(function() {
   $b("#post-list").load("http://localhost/feed2/post-list/");
   $b("#post-list").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');
   $b.ajaxSetup({ cache: false });
});
</script>

<?php get_footer(); ?>

post-list.php

<?php
/*
Template Name: Post List
*/
?>

<div class="my-posts-outer" id="refresh">
    <?php 
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'paged' => $paged
    );
    $my_posts = new WP_Query( $args );
    if ( $my_posts->have_posts() ) : 
    ?>
            <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
            <div class="my-posts-inner">
            <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><span class="time-ago">[ <?php echo meks_time_ago(); ?>]</span> <?php the_title(); ?></a>
 <?php
 if (is_syndicated()) :
      $feedtitle = get_feed_meta('feedtitle');
      if (!is_null($feedtitle)) :
           ?><a class="source-link float-right text-right" rel="<?php print $feedtitle; ?>" href="<?php the_syndication_source_link(); ?>" target="_blank"><?php print $feedtitle; ?></a><?php
      endif;
 endif;
 ?>
            </div>
            <?php endwhile ?>
    <?php endif ?>


</div>
<ul id="entries-pages">
  <li class="nxtpost"><?php next_posts_link('&laquo; Older Entries', $my_posts->max_num_pages) ?></li>
  <li class="prvpost"><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>   
<script>
jQuery(function($) {
    $.ajaxSetup({cache:false});
    $("li.nxtpost a,li.prvpost a").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");

        $("#post-list").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');

    $("#post-list").load(post_url);

return false;
    });
});
</script>

<script>
jQuery(function($) {
    $.ajaxSetup({cache:false});
    $("a.post-link").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");

        $("#post").html('<img src="http://localhost/feed2/wp-content/uploads/2018/01/loader.gif">');

    $("#post").load(post_url);

return false;
    });
});
</script>

This all works great for what it is but id like to bring in/append "new" posts automatically to the top of the loaded loop without refreshing the loop.

If someone could get me pointed in the right direction id appreciate it.

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.