I’m developing a custom plugin that implements an ajax-powered search form on a WordPress site. It runs a WordPress query and outputs the results just below the search box where a user types their search string. Locally in my development environment, the plugin works fine. But when I install it on my production server it does not work. According to the Chrome dev tools, the XHR action for my form submission is returning 200 status but the response says No response data available for this request. The ajax error does not get logged to the console so the request isn’t failing.
I have no direct access to the server so I can’t change or check those settings, I’m assuming it’s something blocking the action from running? I had requested the server administrators to check for any issues with my action running on their server and they said they had resolved this but I’m still having the issue.
This is my code:
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$max_posts = -1;
$the_query = new WP_Query( array( 'posts_per_page' => $max_posts, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'rrm_safety', 'orderby' => 'title', 'order' => 'ASC' ));
if( $the_query->have_posts() ) :
$results = "";
foreach($the_query->posts as $result)
{
$results.= '<div><a href="'.get_permalink($result->ID).'">'.$result->post_title.'</a></div>';
}
print $results;
else:
print '<div>No results</div>';
endif;
die();
}
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
jQuery(document).ready(main);
function main(){
//create a div where we can dynamically send results
jQuery('#topics-search').append('<div id="ajax_search_results_go_here"></div>');
jQuery('#ajax_search_results_go_here').hide();
//listen for changes in our search field
jQuery('#topics-search #search').keyup(get_search_results);
jQuery(window).keydown(function(event){
if( event.keyCode == 13) {
event.preventDefault();
return false;
}
});
}
function get_search_results(){
var keyword = jQuery('#topics-search #search').val();
if(keyword == ""){
jQuery('#ajax_search_results_go_here').html("");
} else {
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: { action: 'data_fetch', keyword: keyword },
success: function(data) {
jQuery('#ajax_search_results_go_here').html( data );
jQuery('#ajax_search_results_go_here').slideDown( 400 );
},
error: function (error) {
console.log(error);
}
});
}
}
</script>