CODEWITHSUNDEEP
javascriptphpjqueryajaxwordpress
Kitty Sanz
Kitty Sanz

Reputation: 1

How to display Wordpress Query using Ajax

Trying to display content using jQuery is giving me some trouble. I’ve created three buttons, when clicked they load data from a php file on my server. Everything works except when I try to send a request to load Wordpress posts. The following fatal error appears: Call to undefined function get_posts(). I learned how to do this from https://perishablepress.com/slide-fade-content/.

For the scripting, I have this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/slide-fade-content/jquery.colorfade.min.js"></script>

<script type="text/javascript">
// slide & fade content @ http://m0n.co/r
$(document).ready(function() {
	$('.more').on('click', function(e) {
		e.preventDefault();
		var href = $(this).attr('href');
		if ($('#ajax').is(':visible')) {
			$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
		}
		$('#ajax').css({ display:'block' }).animate({ height:'200px' },function() {
			$('#ajax').html('<img id="loader" src="loader.gif">');
			$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' });
			$('#ajax').load('slide-fade-content.php ' + href, function() {
				$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
			});
		});
	});
});
</script>

These are my three buttons:

<ul>
  <li><a class="more" href="#first-item">First Item</a></li>
  <li><a class="more" href="#second-item">Second Item</a></li>
  <li><a class="more" href="#third-item">Third Item</a></li>
</ul>

This is where the content appears

<div id="ajax"></div>

And this is the content

<div id="load">
  <div id="first-item">
    <?php
      $args = array( 
      'posts_per_page' => 5, 
      'offset'=> 0, 
      'category' => '2,3,4', 
      'orderby' => 'meta_value_num',
      'meta_key' => 'views',
      'order' => 'DESC',
      'suppress_filters' => true,
        'date_query' => array(
           'after' => date("jS F, Y", strtotime('-24 hours')) 
            )
);

    $myposts = get_posts( $args );
    foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
      <div>
         <li>

            <ul><?php $categories = get_the_category(); $separator = ' '; $output = '';
		       if($categories){
			    foreach($categories as $category) {
			     $output .= '<a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "View all in %s" ), $category->name ) ) . '">'.$category->cat_name.'</a>'.$separator;
			}
				echo trim($output, $separator)			;
			}
			?>
           </ul>

        <a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id,  array(300, 160), $attr ); ?>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?>
        </li>
      </div>
           
  <?php endforeach; 
  wp_reset_postdata();?>

	</div>
	
    <div id="second-item">
			Test2
	
    </div>
	
    <div id="third-item">
			Test3
	</div>
    
</div>

I think I have to define a function, but after many hours of trial and error I’m lost. I can't figure out how to do it or where to defines it.

Upvotes: 0

Views: 444

Answers (1)

Tristan
Tristan

Reputation: 3321

It sounds like your script slide-fade-content.php is not instantiating WordPress so you are not able to call the WordPress function get_posts() and you get the error call to undefined function.

If you include your WordPress config file you will be able to make calls on the WordPress API.

require_once [path to WordPress install].'/wp-config.php';

Upvotes: 1

Related Questions