I need to set up wordpress ajax search results but my method isn't retrieving the results when the button is clicked and is instead redirecting me to another site ( myurl.com?s=term ). I called admin-ajax.php correctly but set this up incorrectly. Any ideas what's causing the problem?
//Script to activate ajax
jQuery(document).ready(function($){
var search_val=$("#s").val();
$('#searchsubmit').click(function(){
$.post(
WPaAjax.ajaxurl,
{
action : 'wpa56343_search',
search_val : search_val
},
function( response ) {
$('#results').append( response );
}
);
});
});
//function to setup wp_query
add_action('wp_ajax_wpa56343_search', 'wpa56343_search');
function wpa56343_search(){
global $wp_query;
$search = $_POST['search_val'];
$args = array(
's' => $search,
'posts_per_page' => 5
);
$wp_query = new WP_Query( $args );
get_template_part( 'search-results' );
exit;
}
//html
<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>
In WordPress, we send all AJAX request to a common URL, then wordpress internally calls the corresponding method according to the parameters which we have sent with the request. You can use the admin_url( 'admin-ajax. php' ) function of WordPress to get this url.
What About jQuery and AJAX? jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming.
To see if the current request is an AJAX request sent from a js library ( like jQuery ), you could try something like this: if( ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) { //This is an ajax request. }
You should wrap your code in document.ready
$(document).ready(function(){
$("#searchsubmit").click(function(e){
e.preventDefault();
var search_val=$("#s").val();
$.post(search.php,{search_string:search_val},function(data){
if(data.length>0){
$("#results").html(data);
}
});
});
});
Update:
$(document).ready(function(){
$("#searchsubmit").click(function(e){
e.preventDefault();
var search_val=$("#s").val();
$.ajax({
type:"POST",
url: "./wp-admin/admin-ajax.php",
data: {
action:'wpa56343_search',
search_string:search_val
},
success:function(response){
$('#results').append(response);
}
});
});
});
In your functions.php
add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); // for not logged in users
add_action('wp_ajax_wpa56343_search', 'wpa56343_search');
function wpa56343_search()
{
// code
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With