POST https://jeeranco.com/wp-admin/admin-ajax.php 400

See more:

HTML

PHP

Ajax

jQuery

HTML5

, +

i created an HTML code to my selected option area in my web site like this

<select name="DropDownList1" id="DropDownList1">
<option value="إختار منطقتك"> إختار منطقتك</option>
<option class="autocomplete-suggestion" data-index="0">الشيخ زايد - زايد 2000</option>
<option class="autocomplete-suggestion" data-index="1">15 مايو</option>
<option class="autocomplete-suggestion" data-index="2">6 أكتوبر</option>
<option class="autocomplete-suggestion" data-index="3">6 أكتوبر - الحصري</option>
<option class="autocomplete-suggestion" data-index="4">6 أكتوبر - الحي الثالث</option>

i named my locations with Arabic
and my JQuery code like this single_js.js in a folder named custom_js.js

jQuery(document).ready(function($){
    $('#DropDownList1').on('change',(function(e){
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;

        wp.ajax.post( 'update_chefs_list', {
                    'location': valueSelected
        } )
        .done( function( response ) {
            $('#chefs_list').html(response);
        } )
        .fail( function() {
            alert( "error" );
        } );
    }));
});

functions.php in my child theme

// Add my custom_js.js file 
wp_register_script( 'my_custom_scripts', get_stylesheet_directory_uri().'/custom_js/single_js.js', 'jquery', '1.1.0', true );
wp_enqueue_script( 'my_custom_scripts'); 
// End Add my custom_js.js file 

add_action( 'wp_ajax_update_chiefs_list', function (){
    global $wpdb; // this is how you get access to the database
    $location = ( $_POST['location'] );

    $args = array(
        'role' => 'Chef',
        'meta_query' => array(
            'relation' => 'OR',
                array(
                    'key'     => 'user_registration_user_Location',
                    'value'   => $location,
                    'compare' => '='
            ),
                array(
                    'key'     => 'user_registration_MenuType',
                    'value'   => 'Single',
                    'compare' => '='
            ),
                array(
                    'key'     => 'user_registration_MenuType',
                    'value'   => 'Family',
                    'compare' => '='
            ),
            array(
                    'key'     => 'user_registration_MenuType',
                    'value'   => 'Frozen',
                    'compare' => '='
            )
    )
 );
$user_query = new WP_User_Query( $args );

$chefs = $user_query->get_results();

$argss = array(

    'post_type'=>'product',
        'posts_per_page'=>-1, 

    'meta_query' => array(
       array(
           'key' => 'chef',
           'value' => $user->ID,
           'compare' => '=',
       )
    )
);
$products = new WP_Query($argss);
//print_r($products );
$arr=wp_list_pluck( $products->posts, 'ID' );
if(count($arr)){ 
$prod .= do_shortcode('[products ids="'.implode(',',$arr).'"]');
}
$output='';
// Check for results
if ( ! empty( $chefs ) ) {
    // loop through each chef
    foreach ( $chefs as $chef ) {
        $output.= '<div class="vc_row wpb_row vc_row-fluid">
<div class="wpb_column vc_column_container vc_col-sm-3" id="chiefs_list">
<div class="vc_column-inner">
<div class="wpb_wrapper">
    <div class="wpb_single_image wpb_content_element vc_align_center">
        <figure class="wpb_wrapper vc_figure">
            <div class="vc_single_image-wrapper vc_box_circle  vc_box_border_grey">
                <div class="vc-zoom-wrapper" style="position: relative; overflow: hidden;width: 130px; height: 130px;"><img class="vc_img-placeholder vc_single_image-img" src="'. get_avatar_url($chef->data->ID) . '"><img role="presentation" alt="" src="http://localhost:8080/jeera_new/wp-content/plugins/js_composer/assets/vc/no_image.png" class="zoomImg" style="position: absolute; top: -313.219px; left: -497.426px; opacity: 0; width: 130px; height: 130px; border: none; max-width: none; max-height: none;">
                </div>
            </div>
        </figure>
    </div>
    <div class="wpb_raw_code wpb_content_element wpb_raw_html" id="chefName">
        <div class="wpb_wrapper" style="text-align: center; font-size:18px">
            <label>' . $chef->data->user_login . '</label>
        </div>
    </div>

</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-9" id="">
        <div class="vc_column-inner">
        <div class="wpb_wrapper">
            <div class="wpb_content_element">'.do_shortcode('[products ids="'.implode(',',$arr).'"]').'</div>
        </div>
        </div>
        </div>

</div>

';


    }
}
    wp_send_json_success( '<h1>'.$output.'</h1>' );
});

What I have tried:

POST https://jeeranco.com/wp-admin/admin-ajax.php 400