I'm trying to put search results into a div with ajax. The issue is I'm getting errors saying undefined function have_posts()
when the the search template is accessed. It also took issue with get_header()
which was in the search-results.php but I took it out. Here's how I have it setup.
<div id="my_search">
<form role="search" method="get" id="searchform" action="http://myurl.com/" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
<div id="results"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#searchsubmit").click(function(e){
e.preventDefault();
var search_val=$("#s").val();
$.post('http://mysite.com/wp-content/themes/beta/search-results.php',{search_string:search_val},function(data){
if(data.length>0){
$("#results").html(data);
}
});
});
});
</script>
And here is the search-results.php
template. I'm wondering if maybe I'm not passing the search results to the template.
<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a title="Permalink to this post" href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
<?php if (!have_posts()) { echo('<li>No results to show.</li>'); } ?>
</ul>