AJAX在分层类别上加载更多内容

时间:2017-11-21 作者:saurav.rox

我正在开发一个插件,我必须在其中添加更多Ajax负载。我需要它的页面是分类法归档页面。

如果没有子类别,则一切正常,但每当添加子类别时,ajax加载更多不会对子类别起作用。我的意思是子类别的分页不能独立工作。它取决于父类别的分页。

若我单击“在子类别上加载更多”,则父类别的分页会增加。我已经重置了查询,但这根本没有帮助。

下面是我所说的结构:

Parent category。。。发布列表Load More

Child category。。。发布列表Load More

如果你愿意,我可以添加代码。如果有人在这上面遮光,那将非常有帮助:)谢谢!

下面是我的代码:

 function wpte_be_load_more_js() {
            global $wp_query;
            if(!isset(get_queried_object()->slug))
                return;
            $wte_trip_cat_slug = get_queried_object()->slug;

            if ( isset($_POST[\'second_class\']) && $_POST[\'second_class\']!= $wte_trip_cat_slug )
            {
                $wte_trip_cat_slug = $_POST[\'second_class\'];
            }

            $args = array(
                \'nonce\' => wp_create_nonce( \'be-load-more-nonce\' ),
                \'url\'   => admin_url( \'admin-ajax.php\' ),
                \'query\' => $wp_query->query,
                \'slug\'  => $wte_trip_cat_slug,
                \'current_page\' => isset($_POST[\'page\']) ? esc_attr($_POST[\'page\']) : 1,
                \'max_page\' => $wp_query->max_num_pages
            );

            wp_enqueue_script( \'be-load-more\', plugin_dir_url( __FILE__ ) . \'js/load-more.js\', array( \'jquery\' ), \'1.0\', true );
            wp_localize_script( \'be-load-more\', \'beloadmore\', $args );
        }
        /**
         * AJAX Load More 
         *
         */
        function wpte_ajax_load_more() {
            check_ajax_referer( \'be-load-more-nonce\', \'nonce\' );
            $wp_travel_engine_setting_option_setting = get_option( \'wp_travel_engine_settings\', true );                 
            $keys=array_keys($_POST[\'query\']);
            $args = 
            array(
                \'post_type\' => \'trip\', // Your Post type Name that You Registered
                \'order\' => \'ASC\',
                \'tax_query\' => array(
                    array(
                        \'taxonomy\' => $keys[0],
                        \'field\' => \'slug\',
                        \'terms\' => $_POST[\'second_class\'],
                        \'include_children\' => true
                    )
                ),
                \'paged\' => $_POST[\'page\']
            );
            ob_start();
            $loop = new WP_Query( $args );
            if( $loop->have_posts() ): while( $loop->have_posts() ): $loop->the_post(); 
                global $post;
                $wp_travel_engine_setting = get_post_meta( $post->ID,\'wp_travel_engine_setting\',true );?>
                <div class="col">
                    <div class="img-holder">
                        <a href="<?php echo esc_url( get_the_permalink() );?>" class="trip-post-thumbnail"><?php
                            $trip_feat_img_size = apply_filters(\'wp_travel_engine_archive_trip_feat_img_size\',\'destination-thumb-trip-size\');
                            $feat_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $trip_feat_img_size );
                            if(isset($feat_image_url[0]))
                            { ?>
                                <img src="<?php echo esc_url( $feat_image_url[0] );?>">
                            <?php
                            }
                            else{
                               echo \'<img src="\'.esc_url(  WP_TRAVEL_ENGINE_IMG_URL . \'/public/css/images/trip-listing-fallback.jpg\' ).\'">\';
                            }?>
                        </a>
                        <?php
                        $code = \'USD\';
                        if( isset($wp_travel_engine_setting_option_setting[\'currency_code\']) && $wp_travel_engine_setting_option_setting[\'currency_code\']!=\'\')
                        {
                            $code = esc_attr( $wp_travel_engine_setting_option_setting[\'currency_code\'] );
                        }
                        $obj = new Wp_Travel_Engine_Functions();
                        $currency = $obj->wp_travel_engine_currencies_symbol( $code );
                        $cost = isset( $wp_travel_engine_setting[\'trip_price\'] ) ? $wp_travel_engine_setting[\'trip_price\']: \'\';

                        $prev_cost = isset( $wp_travel_engine_setting[\'trip_prev_price\'] ) ? $wp_travel_engine_setting[\'trip_prev_price\']: \'\';

                            $code = \'USD\';
                            if( isset( $wp_travel_engine_setting_option_setting[\'currency_code\'] ) && $wp_travel_engine_setting_option_setting[\'currency_code\']!= \'\' )
                            {
                                $code = $wp_travel_engine_setting_option_setting[\'currency_code\'];
                            } 
                            $obj = new Wp_Travel_Engine_Functions();
                            $currency = $obj->wp_travel_engine_currencies_symbol( $code );
                            $prev_cost = isset($wp_travel_engine_setting[\'trip_prev_price\']) ? $wp_travel_engine_setting[\'trip_prev_price\']: \'\';
                            if( $cost!=\'\' && isset($wp_travel_engine_setting[\'sale\']) )
                            {
                                $obj = new Wp_Travel_Engine_Functions();
                                echo \'<span class="price-holder"><span>\'.esc_attr($currency).esc_attr( $obj->wp_travel_engine_price_format($cost) ).\'</span></span>\';
                            }
                            else{ 
                                $obj = new Wp_Travel_Engine_Functions();
                                echo \'<span class="price-holder"><span>\'.esc_attr($currency).esc_attr( $obj->wp_travel_engine_price_format($cost) ).\'</span></span>\';
                            }
                            ?>
                        </strong>
                    </div>
                    <div class="text-holder">
                        <h3 class="title"><a href="<?php echo esc_url( get_the_permalink() );?>"><?php the_title();?></a></h3>
                        <?php
                        $nonce = wp_create_nonce( \'wp-travel-engine-nonce\' );
                        ?>
                        <?php
                        if( isset( $wp_travel_engine_setting[\'trip_duration\'] ) && $wp_travel_engine_setting[\'trip_duration\']!=\'\' )
                        { ?>
                            <div class="meta-info">
                                <span class="time">
                                    <i class="fa fa-clock-o"></i>
                                    <?php echo esc_attr($wp_travel_engine_setting[\'trip_duration\']); if($wp_travel_engine_setting[\'trip_duration\']>1){ _e(\' days\',\'wp-travel-engine\');} else{ _e(\' day\',\'wp-travel-engine\'); }
                                    ?>
                                </span>
                            </div>
                        <?php } ?>
                        <div class="btn-holder">
                            <a href="<?php echo esc_url( get_the_permalink() );?>" class="btn-more"><?php _e(\'View Detail\',\'wp-travel-engine\');?></a>
                        </div>
                    </div>
                </div>
            <?php
            endwhile; 
            wp_reset_postdata();
            endif;
            wp_reset_query(); 
            $data = ob_get_clean();
            wp_send_json_success( $data );
            exit;
        }
        $this->loader->add_action( \'wp_ajax_wpte_ajax_load_more\', $plugin_public, \'wpte_be_load_more_js\' );
        $this->loader->add_action( \'wp_ajax_nopriv_wpte_ajax_load_more\', $plugin_public, \'wpte_be_load_more_js\' );

        $this->loader->add_action( \'wp_ajax_wpte_ajax_load_more\', $plugin_public, \'wpte_ajax_load_more\' );
        $this->loader->add_action( \'wp_ajax_nopriv_wpte_ajax_load_more\', $plugin_public, \'wpte_ajax_load_more\' );
下面是我的javascript:

jQuery(document).ready(function($){
    var loading = false;
    $(\'body\').on(\'click\', \'.btn-loadmore\', function (e){ 
        var second_class = $(this).parent().attr(\'class\').split(\' \')[1];
        loading = true;
        // beloadmore.current_page++;
        var data = {
            action: \'wpte_ajax_load_more\',
            nonce: beloadmore.nonce,
            page: beloadmore.current_page,
            query: beloadmore.query,
            second_class : second_class
        };
        $.post(beloadmore.url, data, function(res) {
            if( res.success) {
                $(\'.\'+data.second_class+\' .btn-loadmore\').before( res.data );
                beloadmore.current_page++;
                if( beloadmore.current_page == beloadmore.max_page  )
                {
                    $(\'.\'+data.second_class+\' .btn-loadmore\').remove();
                }
            } 
            else {
                    $(\'.\'+data.second_class+\' .btn-loadmore\').remove();
            }
        }).fail(function(xhr, textStatus, e) {
            return false;
        });
    });
});

1 个回复
最合适的回答,由SO网友:saurav.rox 整理而成

我将js更改为类似这样的内容,其中存储了每个分类术语的当前页面状态,并将当前页码发送回回调函数,在该函数中,我根据该页码查询帖子。

var loading = false;
      var second_array = [];
      var count = 1;
      $(\'body\').on(\'click\', \'.btn-loadmore\', function (e){ 
        var button = $(this);
        var second_class = $(this).parent().attr(\'class\').split(\' \')[1];
        var postoffset = $(this).siblings(\'.col\').length;
        loading = true;
        var pages = 1;
        var found = false;
        if (second_class in second_array) {
            second_array[second_class] = second_array[second_class]+1;
            found = true;
        }

        if (!found)
        {
          second_array[second_class] = count;
        }
        var maxpage = $(this).parent().attr(\'data-id\');
        var data = {
          action: \'wpte_ajax_load_more\',
          nonce: beloadmore.nonce,
          page: second_array[second_class],
          query: beloadmore.query,
          second_class : second_class,
          postoffset : postoffset
        };
        $.post(beloadmore.url, data, function(res) {
          if( res.success) {
            $(\'.\'+data.second_class+\' .btn-loadmore\').before( res.data );
            if( second_array[second_class] == maxpage-1  )
            {
              $(\'.\'+data.second_class+\' .btn-loadmore\').remove();
            }
          } 
          else {
              $(\'.\'+data.second_class+\' .btn-loadmore\').remove();
          }
        }).fail(function(xhr, textStatus, e) {
          return false;
        });
        e.stopImmediatePropagation();
      }); 

结束

相关推荐

Admin-由于$_请求为空,AJAX响应为0

我强烈反对用延迟加载内容来更新现有的客户端站点。目前,问题似乎在管理ajax中。php文件,其中脚本在if ( empty( $_REQUEST[\'action\'] ) ) die( \'0\' ); 控制台中的错误:GEThttp://www.example.com/wp-admin/admin-ajax.php?lang=en&action=example_frontpage_feed&page=0&next_time=0 net::ERR\\u EM