Question

我正在为wordpress自定义帖子类型创建一个过滤器。我希望能够使用下拉菜单动态显示更多帖子。这很好。问题是，只有对分类术语进行硬编码，我才能使它正常工作。我希望能够使用该用户选择的每页帖子数动态传递该术语。

我已经尝试使用隐藏输入传递它。我能够创建变量并将其添加到name属性，但是无法在服务器端将其拉出。我也认为这是一种骇人听闻的方式。

$args = array(
            'post_type' => 'products',
            'posts_per_page' => $_POST['ppp'],
            'tax_query' => array(
                array(
                    'taxonomy' => 'product-category',
                    'field'    => 'slug',
                    'terms'    => 'terminals'
                ),
            ),
        );

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <select name="ppp">
        <option value="1">Show 12 Per Page</option>
        <option value="2">Show 24 Per Page</option>
        <option value="3">Show 48 Per Page</option>
        <option value="-1">Show All</option>
    </select>
    <!-- <div id = "spinner"></div> -->
    <input type="hidden" name="action" value="myfilter">
</form>

$('#filter').change(function() {
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(),
            type:filter.attr('method'),
            beforeSend:function(xhr){
                //show the spinner
            },
            success:function(data){
                //hide the spinner
                $('#response').html(data);
            }
        });
        return false;
    });

我希望能够从当前职位中获取分类术语并将其通过ajax传递给函数。

Answer 1

我认为您的选择器有点关。请考虑以下因素：

$(function() {
  $("#filter select").change(function() {
    $(this).parent().submit();
  });
  $("#filter").submit(function(e) {
    e.preventDefault();
    var $f = $(this);
    $.ajax({
      url: $f.attr("action"),
      data: {
        ppp: parseInt($("select", $f).val())
      },
      dataType: "html",
      method: "POST",
      beforeSend: function(xhr) {
        //show the spinner
      },
      success: function(data) {
        //hide the spinner
        $('#response').html(data);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="./wp-admin/admin-ajax.php" method="POST" id="filter">
  <select name="ppp">
    <option value="1" selected>Show 12 Per Page</option>
    <option value="2">Show 24 Per Page</option>
    <option value="3">Show 48 Per Page</option>
    <option value="-1">Show All</option>
  </select>
  <!-- <div id = "spinner"></div> -->
  <input type="hidden" name="action" value="myfilter">
</form>

当用户更改select时，将提交表单。表单提交执行AJAX。

希望这会有所帮助。

Answer 2

我最终根据Twisty的响应进行了更多的研究，最终发现将分类法术语添加为隐藏的输入值：

$args = array(
            'post_type' => 'products',
            'posts_per_page' => $_POST['ppp'],
            'tax_query' => array(
                array(
                    'taxonomy' => 'product-category',
                    'field'    => 'slug',
                    'terms'    => $_POST['term']
                ),
            ),
        );

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="tax-filter">
                            <label>
                            <select name="ppp">
                                <option value="12">Show 12 Per Page</option>
                                <option value="24">Show 24 Per Page</option>
                                <option value="48">Show 48 Per Page</option>
                                <option value="-1">Show All</option>
                            </select>
                            <?php //get the post taxonomy term
                            $obj = get_queried_object(); ?>
                            <input type="hidden" name="term" value="<?php echo $obj->slug; ?>">
                            <input type="hidden" name="action" value="myfilter">
                        </form>

$('#tax-filter').change(function() {
    var filter = $('#tax-filter');
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(),
        type:filter.attr('method'),
        beforeSend:function(xhr){
            $('#spinner').toggle();
        },
        success:function(data){
            $('#spinner').toggle();
            $('#sortedPosts').html(data);
        }
    });
    //debugging
    //console.log(filter.attr('method'));
    return false;
});

如何使用Ajax传递当前的分类后术语？

2 个答案: