0

I am developing a plugin where I have to add Ajax Load more. The page where I need it is Taxonomy Archive Page.

Everything works fine if there is no child categories but whenever child category is added then the ajax load more doesn't work on child category. I mean the pagination of child category does not work independently. It depends on the parent category's pagination.

If I click Load More on child category then pagination of parent category is increased. I have reset the query but that does not help at all.

Below is the structure I am talking about:

Parent category ...Post list... Load More

Child category ...Post list... Load More

I can add codes if you like to see. It will be really helpful if anyone shade light on this :) Thank You!

Below is my code:

 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' );

And here is my 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;
        });
    });
});
  • Please add code you are using so person can have better idea. – Pratik bhatt Nov 21 '17 at 10:42
  • Share your code – BlueSuiter Nov 21 '17 at 10:54
  • here @Pratikbhatt – saurav.rox Nov 24 '17 at 3:56
0

I changed my js to something like this one where I stored current page state for each of the taxonomy-terms and send the current page number back to my call-back function where I queried posts on the basis of that page number.

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();
      }); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.