WP AJAX帖子过滤器>使用空值执行某些操作

时间:2021-05-20 作者:jtm

我的AJAX帖子分类过滤器在我的网站上运行良好,这要感谢像你们这样的人的慷慨帖子。我似乎找不到的是,如果所选值为空,如何在AJAX/jQuery脚本中执行某些操作。

以下是我的脚本:

$(function(){
  var event_change = $(\'#event-change\');
  $( ".select" ).selectCF({
    change: function(){
      var value = $(this).val();
      var text = $(this).children(\'option:selected\').html();
  
        $.ajax({
            url: ajaxurl,
            type: \'POST\',
            dataType: \'html\',
            data: {
              action: \'repfilter\',
              category: $(this).children(\'option:selected\').data(\'slug\'),
            },
            success:function(res){
                $(\'#response\').html(res).addClass(\'open\');
            }
        });
    }
  });
})
您将看到,我在最后使用addClass(\'open\')来打开响应div。它完全按照我的要求工作。现在,我需要能够删除类(“open”),如果下拉选项selected值为空,则;选择一个选项;选项我是否遗漏了一些明显的东西?

非常感谢您的帮助!

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

不幸的是,给出的答案不起作用。我只看了jQuery部分,但问题出在functions过滤器中,我在最初的帖子中没有包括它。然而,你确实把我推向了我需要的方向,所以谢谢你!

问题是,我总是从AJAX函数得到响应。空响应不会清除之前的响应,因此我的内容抽屉在打开后永远不会关闭。我最终做的是通过创建一个空的模板部件来修改返回结果的函数。这样,空的select输入将返回一个空div。

以下是完整的代码,以防您想知道:

功能。PHP============

add_action(\'wp_ajax_repfilter\', \'repfilter\'); // wp_ajax_{ACTION HERE} 
add_action(\'wp_ajax_nopriv_repfilter\', \'repfilter\');
 
function repfilter() {
  $catSlug = $_POST[\'category\'];

  $ajaxreps = new WP_Query([
    \'post_type\' => \'sales_reps\',
    \'post_status\' => \'publish\',
    \'posts_per_page\' => -1,
    \'tax_query\' => array(
        array (
            \'taxonomy\' => \'State\',
            \'field\' => \'slug\',
            \'terms\' => $catSlug,
        )
    ),
    \'orderby\' => \'title\', 
    \'order\' => \'ASC\',
  ]);
  $response = \'\';

  if($catSlug == \'\') {  // This was the key! If the dropdown selection is empty, return this empty template file.
      $response .= get_template_part(\'template_parts/null-item\');
  } else {
      if($ajaxreps->have_posts()) {
        while($ajaxreps->have_posts()) : $ajaxreps->the_post();
          $response .= get_template_part(\'template_parts/rep-item\');
        endwhile;
      } else {
        $response = \'Sorry. There are no sales reps in your area.\';
      }
  }

  echo $response;
  exit;
}
还有jQuery==================

$(function(){
  var event_change = $(\'#event-change\');
  $( ".select" ).selectCF({
    change: function(){
      var value = $(this).val();
      var text = $(this).children(\'option:selected\').html();

        $.ajax({
            url: ajaxurl,
            type: \'POST\',
            dataType: \'html\',
            data: {
              action: \'repfilter\',
              category: $(this).children(\'option:selected\').data(\'slug\'),
            },
            success:function(res){
                $(\'#response\').html(res);
                if($(".repItem").length == 0) { // And this little piece checks if the results have a div present, which it would not if the empty template file was returned, and removes the "open" class.
                    $(\'#response\').removeClass(\'open\');
                } else {
                    $(\'#response\').addClass(\'open\');
                }
            }
        });
    }
  });
})
这样就解决了问题。请参见代码示例中的注释。我相信这不是一个非常优雅的解决方案,但它确实奏效了。

SO网友:phatskat

我想你只需要打电话removeClass 第一次也是唯一一次通话addClass 获得结果后,可以使用:

$(function(){
  var event_change = $(\'#event-change\');
  $( ".select" ).selectCF({
    change: function(){
      var value = $(this).val();
      var text = $(this).children(\'option:selected\').html();

      // Remove the open class from the container when the user changes a selection
      $(\'#response\').removeClass(\'open\');
  
        $.ajax({
            url: ajaxurl,
            type: \'POST\',
            dataType: \'html\',
            data: {
              action: \'repfilter\',
              category: $(this).children(\'option:selected\').data(\'slug\'),
            },
            success:function(res){
                if ( ! res ) {
                    return;
                }

                $(\'#response\').html(res).addClass(\'open\');
            }
        });
    }
  });
})

相关推荐

在AJAX-COMMENT-REPLY函数中加载注释时缺少$args

我正在用AJAX加载评论。除了页面上没有呈现回复链接外,一切正常。据我所知,问题是无法传递$args。如何访问回调之外的$args或max\\u depth?Ajax模板:<?php require_once( $_SERVER[\'DOCUMENT_ROOT\'] . \'/wp-load.php\' ); if (isset($_POST[\'id\']) && $_POST[\'id\']) { $comment