Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

PHP AJAX JSON

Thanks to Julian I have the following AJAX Function almost working.  It is returning everything I need it to, almost.  It returns all of the HTML but it does not like a few things in my code:

This does not work, it is puilling from an Advanced Customs Field:
 $video = the_field('show_video');


This works:
  <div id="post-<?php echo $post->ID; ?>" <?php post_class(); ?>>
                        <div class="item">
                            <a href="<?php echo get_permalink($post->ID); ?>" class="overlay-link">


BUT <?php post_class(); ?> does not

This does not work:  <?php the_post_thumbnail('thumbnail'); ?>

This does not work : <?php echo get_the_date( 'Y-m-d' );?>

There are a few more things but maybe that will get me in the correct direction.

<?php
function be_ajax_load_more() {
    
     $args = array(
                'posts_per_page' => -1,
                'post_type' => 'post',
                'post_status' => 'publish'
            );
ob_start();
            $posts_array = get_posts($args);
            foreach ($posts_array as $inx => $post) {
                $video = the_field('show_video');
             
          ?>      
                
                
                           <div class="col-md-4 col-sm-6 col-xs-12">
                    <div id="post-<?php echo $post->ID; ?>" <?php post_class(); ?>>
                        <div class="item">
                            <a href="<?php echo get_permalink($post->ID); ?>" class="overlay-link">
                                <div class="thumbnail">


                                    <?php
                                    if (!empty($video)) {
                                        echo '<div class="video-play">
                                            <img src="../wp-content/themes/surfline/img/playbtn.svg" alt="video" class="video-play-controller">
                                            </div>';
                                    }
                                    ?>   
                                    <?php the_post_thumbnail('thumbnail'); ?>
                                </div>
                            </a>

                            <div class="meta">

                                <?php echo the_category(' '); ?>

                                <span><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;<?php echo get_the_date( 'Y-m-d' );?>  
		<?php 
			$before = "| <strong>Updated</strong>&nbsp;";
			if ( get_the_modified_time( 'U' ) != get_the_time( 'U' ) ) {
				echo $before;
                                echo human_time_diff( get_the_modified_date('U'), current_time('timestamp') ) . ' ' .__( 'ago' );
		} 
                            
                         
		?>
                                    </span>
                                    
                            </div>
                            <a href="<?php echo get_permalink($post->ID); ?>" class="overlay-link">
                                <?php the_title('<div class="headline">', '</div>'); ?>
                            </a>

                        </div>
                    </div>
                </div>
      <?php          
                
                
            }
            //  END Foreach
           
 wp_reset_postdata();
	$data = ob_get_clean();
	wp_send_json_success( $data );
	wp_die();

}

Open in new window


<script>

jQuery(function($){ 
	$('.post-listing').append( '<span class="load-more"></span>' );
	var button = $('.post-listing .load-more');
	var page = 2;
	var loading = false;
	var scrollHandling = {
	    allow: true,
	    reallow: function() {
	        scrollHandling.allow = true;
	    },
	    delay: 400 //(milliseconds) adjust to the highest acceptable value
	};

	$(window).scroll(function(){
		if( ! loading && scrollHandling.allow ) {
			scrollHandling.allow = false;
			setTimeout(scrollHandling.reallow, scrollHandling.delay);
			var offset = $(button).offset().top - $(window).scrollTop();
			if( 2000 > offset ) {
                            
				loading = true;
				var data = {
					action: 'be_ajax_load_more',
					page: page,
					query: beloadmore.query,
				};
				$.post(beloadmore.url, data, function(res) {
					if( res.success) {
						$('.post-listing').append( res.data );
						$('.post-listing').append( button );
						page = page + 1;
						loading = false;
					} else {
						 //console.log(res);
                                                // console.log('hi');
					}
				}).fail(function(xhr, textStatus, e) {
					 //console.log(xhr.responseText);
                                         //console.log('fail');
				});

			}
		}
	});
});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
you are trying to use wp functions but have you given that page access to wp core? inluded wp at the top of the page? some things like post are globals, others are within wp core

see here
http://wpengineer.com/1038/embed-wordpress-functions-outside-wordpress/