CODEWITHSUNDEEP
jqueryajaxwordpress
Mansi Shah
Mansi Shah

Reputation: 33

Ajax search functionality in Wordpress

I have tried adding ajax search functionality to my site using the admin-ajax.php file and also without it, but with no luck. I am using JQuery in other parts of the website too and the scripts stop working when due to this code. When I comment it out, the other scripts (like sliding navbar) start working again. This is the code - ---- functions.php ------

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;
 }
 add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); 
 add_action('wp_ajax_wpa56343_search', 'wpa56343_search');

---- JS file ----

jQuery(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(data){
            $('#results').append(response);
        }
});   
});

and I have used wp_enqueue_script in the functions file for enqueuing scripts. When I add this code, all jquery functionality just stops and for the search page, I get redirected to the default page. The submit buttons click event is also not getting triggered. Can someone please advice? i am trying out everything but nothing seems to be working.

Upvotes: 0

Views: 3501

Answers (2)

Mansi Shah
Mansi Shah

Reputation: 33

So I solved this problem. yay! I was unsuccessful in getting the above code to work, but I found my solution on this blog by David Albert (Thank you David!)

http://premium.wpmudev.org/blog/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/

Its a well written article and easy to understand. Under the comments section in my name, you can find code which is specific to search. (Retrieving and rendering results). Hope this helps.

Upvotes: 1

Bhumi Shah
Bhumi Shah

Reputation: 9476

You can't use get_template_part. Pass data in json format and use that data.

function wpa56343_search()
{
    global $wp_query;
    $search = $_POST['search_val'];
    $args = array(
        's' => $search,
        'posts_per_page' => 5
    );
    $results = new WP_Query( $args );
    echo json_encode( $results );
    exit;
}

Also changed js code

jQuery(document).ready(function($) {
    $("#search-container").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(data){ alert(data);
                $('#results').append(data);
            }
        });
    })
});

Upvotes: 0

Related Questions