AJAX过滤器按钮显示所有帖子

时间:2021-02-19 作者:Mathieu Préaud

我为自定义帖子类型创建了一个循环workshop 具有两个自定义分类法groupteacher 在同一页上由于提供了解决方案,Ajax过滤器可以完美地工作here. 用户可以选择一种或两种分类法来显示帖子。

过滤器的每个链接都与<input type="radio"...>, 对于这两个分类列表。我试图实现的是创建一个按钮.filter-reset 重置所有无线电输入并显示我的自定义帖子类型的所有帖子。

问题是,当我单击按钮时,它返回;找不到帖子;。

以下是前端过滤器的PHP代码:

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter" class="form-filter">
   <div class="container">
   <?php

   if( $terms = get_terms( \'group\', \'orderby=name&exclude=-1\' ) ) :
    echo \'<div class="filter-tax filter--group">\';
    foreach ( $terms as $term ) :
      echo \'<input class="btn-radio" type="radio" name="categoryfilter1" value="\' . $term->term_id . \'"><label>\' . $term->name . \'</label>\';
    endforeach;
    echo \'</div>\';
   endif;

   if( $terms = get_terms( \'teacher\', \'orderby=name&exclude=-1\' ) ) :
     echo \'<div class="filter-tax filter--teacher">\';
     foreach ( $terms as $term ) :
       echo \'<input class="btn-radio" type="radio" name="categoryfilter2" value="\' . $term->term_id . \'"><label>\' . $term->name . \'</label>\';
     endforeach;
     echo \'</div>\';
    endif;

    ?>

    <a href="#" class="filter-reset">View all</a>

    <input type="hidden" name="action" value="myfilter">
  </div>
</form>
函数中AJAX过滤器的PHP代码。php:

add_action(\'wp_ajax_myfilter\', \'mysite_filter_function\');
add_action(\'wp_ajax_nopriv_myfilter\', \'mysite_filter_function\');

function mysite_filter_function(){

   $args = array(
        \'orderby\' => \'date\',
        \'posts_per_page\' => -1
   );

   if (isset($_POST[\'categoryfilter1\']) && isset($_POST[\'categoryfilter2\'])) {

        $args[\'tax_query\'] = array(
            \'relation\' => \'AND\',
            array(
                \'taxonomy\' => \'group\',
                \'field\' => \'id\',
                \'terms\' => $_POST[\'categoryfilter1\']
            ),
            array(
                \'taxonomy\' => \'teacher\',
                \'field\' => \'id\',
                \'terms\' => $_POST[\'categoryfilter2\']
            ),
        );

   } elseif (isset($_POST[\'categoryfilter1\']) && !isset($_POST[\'categoryfilter2\'])) {

        $args[\'tax_query\'] = array(
        array(
        \'taxonomy\' => \'group\',
        \'field\' => \'id\',
        \'terms\' => $_POST[\'categoryfilter1\']
        )
        );

   } elseif (!isset($_POST[\'categoryfilter1\']) && isset($_POST[\'categoryfilter2\'])) {

        $args[\'tax_query\'] = array(
        array(
        \'taxonomy\' => \'teacher\',
        \'field\' => \'id\',
        \'terms\' => $_POST[\'categoryfilter2\']
        )
        );

   }

    $query = new WP_Query( $args );

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            get_template_part( \'template-parts/content-archive\' );
        endwhile;
        wp_reset_postdata();
    else :
        echo \'No posts found\';
    endif;

    die();
}
JS代码:

$(\'#filter\').change(function(){
    var filter = $(\'#filter\');
    $.ajax({
        url:filter.attr(\'action\'),
        data:filter.serialize(),
        type:filter.attr(\'method\'),
        beforeSend:function(xhr){
            //filter.find(\'button\').text(\'Processing...\');
        },
        success:function(data){
            //filter.find(\'button\').text(\'Filter\');
            $(\'.loop-archive\').html(data);
        }
    });
    return false;
});

$(".filter-reset").click(function() {
    document.getElementById(\'filter\').reset();
    $(\'.loop-archive-workshop\').append();

    var filter = $(\'#filter\');

    $.ajax({
        url:filter.attr(\'action\'),
        type:filter.attr(\'method\'),
        data:filter.serialize(),
        success:function(data){
            $(\'.loop-archive\').html(data);
        }
    });
    return false;
});
谢谢你。

编辑

这是日志。txt当我单击重置按钮时:

Array
(
    [action] => myfilter
)

2 个回复
最合适的回答,由SO网友:Buttered_Toast 整理而成

按照@JacobPeattie所说的,它们仍然设置为空,您需要更改条件登录以检查是否为空。

在我们之前的讨论中,我写了以下条件

if ((isset($_POST[\'categoryfilter1\']) && !empty($_POST[\'categoryfilter1\'])) && (isset($_POST[\'categoryfilter2\']) && !empty($_POST[\'categoryfilter2\']))) {
    // both properties are set and have value (not empty)
} elseif ((isset($_POST[\'categoryfilter1\']) && !empty($_POST[\'categoryfilter1\'])) && (!isset($_POST[\'categoryfilter2\']) || empty($_POST[\'categoryfilter2\']))) {
    // only categoryfilter1 is set and has value and categoryfilter2 is either not set or set but has no value
} elseif ((!isset($_POST[\'categoryfilter1\']) || empty($_POST[\'categoryfilter1\'])) && (isset($_POST[\'categoryfilter2\']) && !empty($_POST[\'categoryfilter2\']))) {
    // only categoryfilter2 is set and has value and categoryfilter1 is either not set or set but has no value
}
尝试使用它,看看是否有帮助

编辑

我不知道你想得到什么样的帖子类型,但试着把它添加到$参数中。

因此,初始$参数将如下所示

$args = array(
    \'post_type\' => \'post\',
    // \'post_status\' => \'publish\', // this is optional, this will get only published posts
    \'orderby\' => \'date\',
    \'posts_per_page\' => -1
);
我认为这造成了问题

SO网友:Jacob Peattie

问题正在使用isset() 对于条件:

isset($_POST[\'categoryfilter1\']) && isset($_POST[\'categoryfilter2\'])
因为这些输入仍然是表单的一部分,所以它们的post变量仍将设置为空。使用!empty()empty() 将是一种方式:

if (isset($_POST[\'categoryfilter1\']) && isset($_POST[\'categoryfilter2\'])) {
    // etc.
} elseif (!empty($_POST[\'categoryfilter1\']) && empty($_POST[\'categoryfilter2\'])) {
    // etc.
} elseif (empty($_POST[\'categoryfilter1\']) && !empty($_POST[\'categoryfilter2\'])) {
    // etc.
}

相关推荐

如何在管理-AJAX过程中保存小工具时保持脚本持久化?

是否有一个钩子来保持小部件中包含的脚本在admin-ajax.php 过程我使用jQueryshow() 要打开小部件中的元素,该元素应保持关闭状态,直到单击为止,并按预期工作。然而,当小部件被保存并且WP正在admin ajax中执行ajax时。php中,函数失败并在没有任何交互的情况下打开。如果重新加载页面,函数将恢复正常。函数正在从文件运行myscript.js 并加载到admin_enqueue_scripts 行动 $(".handle").click(function(){