0

I am using a custom query in order to ajax load/append additional posts instead of paginating them out like WP defaults. However, when I click the button I've made to load more posts, it loads all posts rather than the ones that match the search result (while the first set matches the search result). How do I maintain this format of loading posts while retaining the search query?

I successfully did this for my category pages with something like query_posts(array('cat' => $category)); but am unsure how to do it for search.

Button:

var pager = 1;
var search_load_posts = function(){  
    $.ajax({  
        type       : "GET",  
        data       : {pageNumber: pager, offset: 12},  
        dataType   : "html",  
        url        : "http://tay.is/designing/belmontvision/wp-content/themes/yamidoo/search-more-loop.php",  
        beforeSend : function(){},  
        success    : function(data){  
            var $data = $(data);  
            $container.append( $data ) .packery( 'appended', $data );
            heightcalc();
            $container.packery();
        }
    });
};

$('.search-load-more').click( function() {
    search_load_posts();
    pager++;
});

Original Loop Query:

<?php if (have_posts()) : get_template_part('loop-search'); ?>

Top Loop Search (loop-search.php):

<?php   $count = 1; while (have_posts()) : the_post();?>

Additional Post Query (search-more-loop.php):

<?php   require_once('../../../wp-load.php');   
        $page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
        $offset = (isset($_GET['offset'])) ? $_GET['offset'] : 0;

        $args = array ( 'posts_per_page' => 12,);

        $last_twelve = get_posts($args);
        $last_twelve_ids = array();
        if( $last_twelve ) foreach( $last_twelve as $last_post ) { $last_twelve_ids[] = $last_post->ID; }

        query_posts(array(  
            'paged' => $page,
            'post__not_in' => $last_twelve_ids
        ));  

        while (have_posts()) : the_post(); ?>

1 Answer 1

3

Before we begin, I must point out the following:

  • You're using a file in your theme to send AJAX requests to, don't do this, there are security implications. Instead, use the WP AJAX API, you'll be able to remove half the code and make it work without having to change the URL everytime your site moves
  • You used query_posts to make your query, this is almost always a bad thing. If you need to query for posts, use get_posts or a WP_Query object. If you need to change what the main query does ( e.g. only show X on the homepage ) then use the pre_get_posts filter
  • You have a line with an if statement, a for loop, and an assignment, this is bad, imagine you got told there was an error on that line in your error log, how would you know which part caused the error?
  • You pass an offset to the AJAX call then ignore it
  • Use of $ with jQuery in no conflict mode, could cause issues and implies you're bundling your own jquery rather than the one built into WordPress ( jQuery(document) not $(document) )

As for your problem, you made a query, but you specified:

query_posts(array(
    'paged' => $page,
    'post__not_in' => $last_twelve_ids
));

aka:

Show me all the posts on page X but not these posts: a,b,c,d,e,f, etc

Nowhere have you specified what the search term is, so how will it know? Code isn't psychic, and there is no auto-magic here to figure out that you're trying to search for something, it needs to be told.

To do this, lets look at the WP_Query codex page that lists all the possible parameters

Show posts based on a keyword search.

  • s (string) - Search keyword.

Which gives us:

$query = new WP_Query(
    's' => $search_term
    'paged' => $page,
    'post__not_in' => $last_twelve_ids
);
while ( $query->have_posts() ) {
    $query->the_post();
    // etc

But we didn't pass along a search term in your AJAX call, so how does it know what to search for? We'll need something like this to recieve it:

$search_term = (isset($_GET['searchterm'])) ? $_GET['searchterm'] : 0;

And in your AJAX call, you'll need to change the javascript here:

data       : {pageNumber: pager, offset: 12, searchterm: searchterm },

You'll need to assign searchterm a value in your javascript before the load call, how you do that though is dependent on your html, and you haven't provided that.

After doing this, you will have what you needed, however you will still have these issues:

  • An insecure AJAX endpoint inside your theme ( use the WP AJAX API )
  • A hardcoded path to your website in your javascript ( again WP AJAX API will fix this )
  • PHP that doesn't validate the inputs and could lead to an injection attack

Further Reading

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.