0

I'm trying to change the default behaviour or WP search page, I have hidden the paging links, and added a button("more results") that sends an ajax request, but I'm not sure how to handle this request.

When I search something I see 16 results, I want to click the "more results" button and get 12 more results, this can go on for as long as there are results.

But I can´t get the search to be executed with the same term, how do I pass it?

This is my ajax_results.php file:

<?php
    $page = get_query_var('page');
    $term = get_query_var('term');
    $args = array(
        'posts_per_page' => 12,
        'paged' => $page,
        's' => $term
    );
$query = new WP_Query($args);
?>
<?php if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post(); ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
        <?php if ( has_post_thumbnail()) : ?>
            <?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array(250,250), false, '' ); ?>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="thumb_link">
                <div class="author_thumb" style="background-image: url('<?php echo $src[0]; ?>')"></div>
            </a>
        <?php endif; ?>

        <div class="author_art_link">
            <h2>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            </h2>
            <span class="date"><?php the_time('F j, Y'); ?></span>
        </div>
    </article>


<?php endwhile;
endif;
?>

But I'm not getting the desired results, the ajax request correctly sends the page and term values.

How can I accomplish what I'm trying? My doubt is with the wp_query, the rest is all done, styling, functionality, etc, I'm just getting the wrong posts!

Thanks

Edit, javascript:

 ;(function($){
            $(document).ready(function(){
                var count = 2;
                $('.js_more_search').click(function(){
                    loadArticle(count);
                    count++;
                    $(this).addClass('loading');
                });

                function loadArticle(pageNumber){
                    $.ajax({
                        url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page="+ pageNumber + '&loop_file=ajax_results&term=<?php echo get_search_query(); ?>',
                        success: function(html){
                            $("#search-results").append(html);   // This will be the div where our content will be loaded
                            $('.more_articles').removeClass('loading');
                        }
                    });
                    return false;
                }
            });
        })(jQuery);
  • Can you post information about your AJAX request? And some debugging of your query_vars? – fischi May 11 '15 at 10:10
  • Added javascript, but I'm not sure how to get query_vars as it doesn't matter where I put it and I get an error 500 – aabreu May 11 '15 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.