0

Пытаюсь внедрить 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>

js

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 все пропадает, т.е. он становится пустым. Помогите разобраться.

3
  • А где wp_enqueue_script? приведенный код работать не может. 21 апр 2018 в 8:46
  • Мне вот интересно... Все такие умные, кинулись сразу js исправлять (может и правильно, конечно), но самой сути не увидели. В силу влияния "крутых" фронтендеров народ поголовно стал пихать баттоны, где надо и надо, забывая о том, что обработку клика нужно делать самому. Посему, уважаемый ТС, либо поменяйте вашу кнопку на обычный input type="submit", либо текущей пропишите type="submit", либо напишите сами обработчик, с чего у вас форму должна сабмититься то?
    – DaemonHK
    24 апр 2018 в 5:37
  • @DaemonHK Форма сабмиттся, потому что вы плохо знаете html. Откройте стандарт html.spec.whatwg.org/multipage/form-elements.html и найдите там абзац "The missing value default and invalid value default are the Submit Button state". Это, кстати, подтверждается и текстом вопроса, из которого видно, что событие submit срабатывает. Прежде чем давать едкие комментарии, предполагающие, что вы самый умный, стоит себя хоть как-то проверять. 30 апр 2018 в 5:26

2 ответа 2

0

Так происходит, потому что в 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;
    });
});
7
  • >> И, кроме того, вы совершенно напрасно пренебрегаете nonce. Это следующий этап, с которым нужно разобраться, сначала хочется заставить работать код, а потом конечно и проверку делать
    – user242682
    21 апр 2018 в 16:16
  • >> Так происходит, потому что в ajax-запросе отсутствует поле action. Вы имеете ввиду action в form? добавляя action в < form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" > ни каких изменений не видно
    – user242682
    21 апр 2018 в 16:21
  • У вас в $.ajax внутри data должно быть поле action. Читайте документацию. И оно должно быть для вашего кода myfilter. Иначе каким чудом WP догадается, что надо передать управление вашему хуку wp_ajax_myfilter? Еще раз: admin.ajax.php, который вызывается по $.ajax, смотрит в POST поле action. Если его нет - 400. Если не существует хук wp_ajax_{action} - 400. 21 апр 2018 в 17:24
  • Откройте код admin-ajax.php, там все понятно. 21 апр 2018 в 17:24
  • поставил action data:jQuery('#filter').serialize() но результата нет, в консоле браузера нет ни каких ошибок почему то
    – user242682
    22 апр 2018 в 4:58
0

В общем с учетом подсказок постарался поправить код

    /***Фильтр ajax**/

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

    wp_localize_script( 'tc-basejs', 'myajax', 
        array(
            'url' => admin_url('admin-ajax.php')
        )
    );  

}
add_action('wp_footer', 'my_action_javascript', 99); // для фронта
function my_action_javascript() {
    ?>
<script>
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:'POST', // тип запроса
            beforeSend:function(xhr){
                filter.find('button').text('Загружаю...'); // изменяем текст кнопки
            },
            success:function(data){
                filter.find('button').text('Применить фильтр'); // возвращаеи текст кнопки
                $('#response').html(data);
            }
        });
        return false;
    });
});

</script>
<?php
}

add_action('wp_ajax_myfilter', 'true_filter_function'); 
add_action('wp_ajax_nopriv_myfilter', 'true_filter_function');
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();
}

+ HTML

<form method="POST" id="filter">

<input type="text" name="cena_min" placeholder="Минимальная цена" />
<input type="text" name="cena_max" placeholder="Максимальная цена" />

<button type="submit">Применить фильтр</button>
<input type="hidden" name="action" value="myfilter">
</form>

Но по прежнему работает только кнопка (меняет значения) сама фильтрация отказывается работать, полагаю ошибка где то в PHP обработчике, но хоть убей не пойму где? Если кто знает подскажите

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.