Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Jquery to retrieve ajax search results for wordpress

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>  
like image 215
Pollux Khafra Avatar asked Jun 23 '12 04:06

Pollux Khafra


People also ask

How do I get AJAX data in WordPress?

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.

Can you use jQuery with AJAX?

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!

Which object can be used to retrieve data in AJAX?

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.

How can I tell if WordPress AJAX is working?

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. }


1 Answers

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
}
like image 56
The Alpha Avatar answered Oct 14 '22 14:10

The Alpha