Javascript not working

Question

Here is my js code

var geoSearch = new google.maps.Geocoder;
jQuery(document).ready(function() {     
var address = FYN_search.postcode;      
if(jQuery.type( address ) === "string"){
    var region = 'Austria';
    address = address + ', ' + region;
    geoSearch.geocode({'address':address,'region':region},function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            var point = results[0].geometry.location;
            var data={
                action:'filter_search',
                lat:point.lat(),
                lng:point.lng()
            }

            jQuery.post(FYN_search.ajaxurl, data, function(returndata){
                console.log('ajax posting');
                jQuery('#resulit').html(returndata);                    
            });

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
});

this code will call a method named 'filter_search' & this method is defined in my plugin in index file

add_action('wp_ajax_filter_search', 'filter_search_result');

   function filter_search_result(){
           echo 'hello world';
 }

But why this method isnt run ??

Answer 1

wp_ajax_{my-action} action hook is only for admin side. For frontend you must use wp_ajax_nopriv_{my-action}. You can combina both if the ajax action is for both sides. For example:

add_action('wp_ajax_filter_search', 'filter_search_result');
add_action('wp_ajax_nopriv_filter_search', 'filter_search_result');

Also, don't forget, never, to die or exit at the end of the ajax action because the program is not closed by WordPress on ajax requests, at least you use wp_send_json family of functions.

add_action('wp_ajax_filter_search', 'filter_search_result');
add_action('wp_ajax_nopriv_filter_search', 'filter_search_result');
function filter_search_result(){
    echo 'hello world';
    exit;
}