Проблема с Ajax на WordPress

140

22 апреля 2018, 22:00

Пытаюсь внедрить ajax фильтр по цене в WordPress, но он упорно не хочет работать, возвращает пустой результат.

Подключаю ajax во фронтэнде так:

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){
    wp_localize_script( 'script', 'myajax', 
        array(
            'url' => admin_url('admin-ajax.php')
        )
    );  
}

Html фильтра

<form method="POST" id="filter">
<input type="text" name="cena_min" placeholder="Минимальная цена" />
<input type="text" name="cena_max" placeholder="Максимальная цена" />
<button>Применить фильтр</button>
<input type="hidden" name="action" value="myfilter">
</form>

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $(this);
        $.ajax({
            url:myajax.url, // обработчик
            data:filter.serialize(), // данные
            type:filter.attr('method'), // тип запроса
            beforeSend:function(xhr){
                filter.find('button').text('Загружаю...'); // изменяем текст кнопки
            },
            success:function(data){
                filter.find('button').text('Применить фильтр'); // возвращаеи текст кнопки
                $('#response').html(data);
            }
        });
        return false;
    });
});

PHP обработчик

function true_filter_function(){
        $args = array(
        'orderby' => 'ID', // сортировка
        'order' => 'ASC' // ASC или DESC
    );

// создаём массив $args['meta_query'] если указана хотя бы одна цена
    if( isset( $_POST['cena_min'] ) || isset( $_POST['cena_max'] ) )
        $args['meta_query'] = array( 'relation'=>'AND' ); // AND значит все условия meta_query должны выполняться
    // условие 1: цена больше $_POST['cena_min']
    if( isset( $_POST['cena_min'] ) )
        $args['meta_query'][] = array(
            'key' => 'new_price',
            'value' => $_POST['cena_min'],
            'type' => 'numeric',
            'compare' => '>'
        );
    // условие 2: цена меньше $_POST['cena_max']
    if( isset( $_POST['cena_max'] ) )
        $args['meta_query'][] = array(
            'key' => 'new_price',
            'value' => $_POST['cena_max'],
            'type' => 'numeric',
            'compare' => '<'
        );
    die();
}

add_action('wp_ajax_myfilter', 'true_filter_function'); 
add_action('wp_ajax_nopriv_myfilter', 'true_filter_function');

В итоге после нажатия кнопки "Применить фильтр" происходит отправка значений, надпись кнопки меняется на "загружаю" и далее опять "Применить фильтр", но в блоке response все пропадает, т.е. он становится пустым. Помогите разобраться.

Answer 1

Так происходит, потому что в ajax-запросе отсутствует поле action. Не видя этого поля в массиве POST, admin-ajax.php возвращает код 400. Вы получаете пустой ответ с кодом завершения 400. Инструкция на русском.

И, кроме того, вы совершенно напрасно пренебрегаете nonce.

UPDATE

Ваш js должен выглядеть примерно так

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $(this);
        var data = {
            action: 'myfilter',
            cena_min: $('#filter input[name=cena_min]').val(),
            cena_max: $('#filter input[name=cena_max]').val()
        };
        $.ajax({
            url:myajax.url, // обработчик
            data:data, // данные
            type:filter.attr('method'), // тип запроса
            beforeSend:function(xhr){
                filter.find('button').text('Загружаю...'); // изменяем текст кнопки
            },
            success:function(data){
                filter.find('button').text('Применить фильтр'); // возвращаеи текст кнопки
                $('#response').html(data);
            }
        });
        return false;
    });
});