WordPress Ajax Filter

时间:2017-01-09 作者:Dionoh

我正试图得到AJAX 要使用的筛选器Wordpress 但我一直有一个错误:

Uncaught ReferenceError: reports is not defined filter.js?ver=1.0:5

这是我用来将脚本排队并本地化的插件:

ajax过滤器。php

 function ajax_test_enqueue_scripts() {
    wp_enqueue_script( \'reports\', plugins_url( \'/js/filter.js\', __FILE__ ), array(\'jquery\'), \'1.0\', true );

  wp_localize_script( \'reports\', \'filters\',
          array(
              \'ajax_filter\' => admin_url( \'admin-ajax.php\' ),
  ));

 }
 add_action( \'wp_enqueue_scripts\', \'ajax_test_enqueue_scripts\' );
这是最重要的。它排队的js文件

过滤器。js公司

$( document ).ready(function() {
  $("input:checkbox").on( "change", function() {
        console.log($(\'input[name="filter[]"]:checked\').serialize());
        jQuery.ajax({
        url : reports.ajax_filter,
        type : \'post\',
        data : {
            action : \'filter_reports\',
            filter : options
        },
        success : function( response ) {
            alert(response)
        }
    });
});
});
这是必须进行过滤的页面。

page-home.php

<?php /* Template Name: Home Page */

get_header(); ?>

<header class="entry-header">
    <?php get_the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
</header><!-- .entry-header -->

<div class="ewf-row">
            <div style="float:left; width:100%;">
                <h1>
                Welcome <?php global $current_user;
                  get_currentuserinfo();

                  echo $current_user->display_name . "\\n"; echo \'<small style="font-size:12px;">\' . $current_user->user_email . "\\n" . \'</small>\'
                        ?>
                </h1>
            </div>
            <p>

<br>
<br>
<strong id="desktop-only">1 Way to access your reports</strong>
<strong id="mobile-only">2 Ways to access your reports</strong>
            </p>

            <p>
                <div id="ebook-btn-info" class="ebook-buttons-info">
                    <div class="box">
                        <div class="ebook-download-info">View</div>
                        <div style="margin-top: 8px;">Click this option if you want to download and view the report(s) as a regular PDF document.</div>
                    </div>
                    <div class="box" id="mobile-only">
                        <div class="ebook-download-info">EPUB</div>
                        <div style="margin-top: 8px;">Use the EPUB option if you want to install the report in the iBook or Kiosk app on your tablet or smartphone.</div>
                    </div>
                </div>
            </p>
            <div class="devider"></div>
        </br>

    <!--
<div id="ebooks-category">
    <div class="ebooks-category-title">Categories: </div>
    <a class="ebooks-active">EPIC</a>   <a href="http://epic.trmoncology.com/ebooks/#ebook-btn-info">EPIC - CC</a>

</div>

-->





<?php
 $disease = get_terms( array(\'disease\') );
 $report    = get_terms( array(\'type\')      );

?>

<div style="width:100%; float:left;"><strong>Reports currently available to you</strong></div>
<div class="devider"></div>

<div id="epic-filter">


    <h3>Disease Type</h3>
    <form name="disease" id="filter-disease">

        <?php
        foreach ($disease as $value) {
            echo \'<div class="filter \'.$value->slug.\'">\';
            echo \'<input type="checkbox" data-filter=".\'. $value->slug .\'" class="\'. $value->term_id .\'" value="\'. $value->term_id .\'" name="filter[]" ><div class="filter-title">\'. $value->name .\'</div><span class="filter-count">\'. $value->count .\'</span>\';
            echo \'</div>\';
            // echo $value->name;
        }
        ?>
    </form>

</div>




<!--Loop EPIC-->

<div id="ebook-wrapper">




<?php
$uid = get_current_user_id();

            //$user_cats = get_user_meta( $uid, \'categories\', false );  // this should return the values as array

            $paged = ( get_query_var( \'page\' ) ) ? get_query_var( \'page\' ) : 1;

            $customer_account  = get_field(\'customer_account\', \'user_\'.$uid );

            $args = array(
                \'post_type\' => \'ebooks\',
                \'tax_query\' => array(
                    \'relation\' => \'AND\',
                    array(
                        \'taxonomy\' => \'customer\',
                        \'field\'    => \'term_id\',
                        \'terms\'    => $customer_account,
                    )
                ),
            );


            $the_query = new WP_Query( $args );

        // The Loop
        if ( $the_query->have_posts() ) {

            while ( $the_query->have_posts() ) {
                $the_query->the_post();

                $terms = wp_get_post_terms($post->ID, \'disease\');
                foreach($terms as $term){
                ?>


            <!--Ebook Container-->

            <div id="post-<?php the_ID(); ?>" <?php post_class(\'ebook-container\'); ?> <?php echo \'data-cat="\'. $term->slug .\'"\' ?>>

                <!-- <div class="ebook-date"><--?php the_time(\'M j\') ?></div> -->
                        <!-- <a href="<--?php echo get_post_permalink ( $post->ID ); ?>"></a> -->

                        <!--Image-->
                        <div class="ebook-image">
                            <img src="<?php echo the_field(\'e-image\'); ?>"> <!--This will get the featured Image attached -->
                        </div>

                        <div id="ebook-middle">
                        <!-- Title -->
                        <div class="ebook-title">
                            <?php echo the_field(\'e_detail_title\'); ?>
                        </div>

                </div>



                <!--Content-->
                <div class="ebook-content">
                    <?php echo the_field(\'e-detail-intro\') ?>
                </div>

            <!--Details-->
            <div id="ebook-details">
            <div class="e-detail ebook-details-chair"><strong>Chair: </strong><?php echo the_field(\'e-detail-chair\'); ?></div>
            <div class="e-detail ebook-details-date"><strong>Date:</strong> <?php echo the_field(\'e-detail-date\'); ?></div>
            <div class="e-detail ebook-details-location"><strong>Location:</strong> <?php echo the_field(\'e-detail-location\'); ?></div>
            </div>



                <div class="ebook-buttons">
                    <a href="<?php echo the_field(\'e-down-view\'); ?>"><div class="ebook-download">View</div></a>
                    <a id="mobile-only" href="<?php echo the_field(\'e-pub\'); ?>" download><div class="ebook-download">EPUB</div></a>
                </div>


                <!-- <?php
                if ( current_user_can(\'administrator\') ) {
                     echo the_taxonomies( \'before=<ul>&after=</ul>\' );
                } else {
                     echo "";
                }
                  ?> -->


            </div>

            <?php }} ?>

            <?php
            /* Restore original Post Data */
            wp_reset_postdata();
        } else {
            echo \'<div class="alert alert-danger" role="alert">No Ebooks available.</div>\';
        }
        ?>
</div>
<!--Loop EPIC - END-->

        <!-- <ul class="pagination pull-right">
            <li class="pagination-prev"><--?php echo get_previous_posts_link( \'Previous Ebook List\' ); ?></li>
                        <li class="pagination-next"><--?php echo get_next_posts_link( \'Next Ebook List\', $the_query->max_num_pages ); ?></li>
                        <li class="pagination-viewall"><a href="http://local.ebooks.com/ebooks/">View All Ebooks</a></li>
        </ul> -->
    </div><!-- .content-area -->

<script>


</script>

<?php get_footer(); ?>
我真的希望你们能帮助我。

我已经查找了一个解决方案,但找不到与我的代码相关的任何内容。

1 个回复
SO网友:cybmeta

以您使用的方式wp_localize_script(), 对象的名称为filters, 不reports; 所以,在过滤器中。您应该使用的jsfilters.ajax_filter. 此外,还应定义变量options 使用前。

$( document ).ready(function() {
  $("input:checkbox").on( "change", function() {
        console.log($(\'input[name="filter[]"]:checked\').serialize());
        jQuery.ajax({
            url : filters.ajax_filter,
            type : \'post\',
            data : {
                action : \'filter_reports\',
                // You should define options var before use it
                // filter : options
            },
            success : function( response ) {
                alert(response)
            }
        });
  });
});
我建议您对变量使用更明确的名称;选择能自我解释的名字;当然,这只是一种观点。例如:

// Use the name of the script as handle parameter
wp_enqueue_script( \'filter\', plugins_url( \'/js/filter.js\', __FILE__ ), array(\'jquery\'), \'1.0\', true );

// Use a name for the object which explain that it is data for filter script
wp_localize_script( \'filter\', \'filter_data\',
          array(
              // Use a nanme that explain what the property contains
              \'ajax_url\' => admin_url( \'admin-ajax.php\' ),
          )
);
然后,在过滤器中。您必须使用的jsfilter_data.ajax_url:

$( document ).ready(function() {
  $("input:checkbox").on( "change", function() {
        console.log($(\'input[name="filter[]"]:checked\').serialize());
        jQuery.ajax({
            url : filter_data.ajax_url,
            type : \'post\',
            data : {
                action : \'filter_reports\',
                // You should define options var before use it
                // filter : options
            },
            success : function( response ) {
                alert(response)
            }
        });
  });
});

相关推荐

WordPress AJAX错误400向远程站点发送数据的错误请求

我正在使用发件人。net获取电子邮件订阅列表。这个网站给了我一些信息,可以将用户的电子邮件添加到订阅列表中。我想使用WordPress ajax来实现这一点。但它返回错误400错误请求。我的代码是:文件ajax新闻脚本。js公司: jQuery(document).ready(function($){ // Perform AJAX send news on form submit $(\'form#fnews\').on(\'submit\', funct