Question

我正在尝试从WordPress中的自定义查询循环加载更多帖子，我创建了自定义帖子类型“企业”，并希望在单击“加载更多”按钮时加载“更多企业”。我正在使用Visual Composer简码添加业务的内容。我已经成功创建了“加载更多”按钮以获取更多业务，但它在提到的“ id”内部以及该id外部附加了数据。我无法检测到该问题。

这是我的代码：在functions.php中，我添加了此本地化脚本：:

wp_localize_script( 'test-script', 'ajax_posts', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'noposts' => __('No older posts found', 'test'),
    'page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,     
));

我的main.js文件代码包含如下所示的ajax调用：

function load_posts(data, button, wrapper, max_page, load_more_txt ="View All"){
       $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: data,
            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success: function(data){
                if( data ) {
                    button.text( load_more_txt ).prev().before(data);
                    ajax_posts.page++;
                wrapper.append(data);
                    if ( ajax_posts.page == max_page ) {
                        button.remove();
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
             $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
       });
       return false;
    }

我在document.ready ::

上调用了此函数

   $("#more_posts").on("click",function(){
        var el = $("#more_posts");
        // Disable the button.
       el.attr("disabled",true);

       var business_category = el.data('business_category');
       var business_location = el.data('business_location');
       var business_industry = el.data('business_industry');
       var post_count = el.data('post_count');
       var offset = el.data('offset');
       var max_page = el.data('max_page');

       //shortcode enable/disable options value
       var show_business_review = el.data('show_business_review');
       var show_features = el.data('show_features');
       var show_buy_giftcard = el.data('show_buy_giftcard');
       var show_book_online_button = el.data('show_book_online_button');
       var enable_coupon_discount = el.data('enable_coupon_discount');
       var show_get_free_cleaning_btn = el.data('show_get_free_cleaning_btn');

       data = {
        'business_category': business_category,
        'business_location': business_location,
        'business_industry': business_industry,
        'post_count': post_count,
        'offset': offset,
        'page': ajax_posts.page,
        'show_business_review': show_business_review,
        'show_features': show_features,
        'show_buy_giftcard': show_buy_giftcard,
        'show_book_online_button': show_book_online_button,
        'enable_coupon_discount': enable_coupon_discount,
        'show_get_free_cleaning_btn': show_get_free_cleaning_btn,
        'action': 'more_post_ajax'
    }
    var wrapper = $("#marketplace-businesses");
    var loadMoreTxt = "View All";
    // call load more posts function
       load_posts(data, el, wrapper, max_page, loadMoreTxt);
    });

此后，我添加了获取Ajax数据并加载新帖子的功能：

function more_post_ajax(){
    header("Content-Type: text/html");
    $business_category = (isset($_POST['business_category'])) ? $_POST['business_category'] : '';
   $business_location = (isset($_POST['business_location'])) ? $_POST['business_location'] : '';
   $business_industry = (isset($_POST['business_industry'])) ? $_POST['business_industry'] : '';
   $post_count = (isset($_POST['post_count'])) ? $_POST['post_count'] : 2;
   $page = (isset($_POST['page'])) ? $_POST['page'] + 1 : 1;
   $offset = (isset($_POST['offset'])) ? $_POST['offset'] : '';
   // shortcode enable disable options
   $show_business_review = (isset($_POST['show_business_review'])) ? $_POST['show_business_review'] : true;
   $show_features = (isset($_POST['show_features'])) ? $_POST['show_features'] : true;
   $show_buy_giftcard = (isset($_POST['show_buy_giftcard'])) ? $_POST['show_buy_giftcard'] : true;
   $show_book_online_button = (isset($_POST['show_book_online_button'])) ? $_POST['show_book_online_button'] : true;
   $enable_coupon_discount = (isset($_POST['enable_coupon_discount'])) ? $_POST['enable_coupon_discount'] : true;
   $show_get_free_cleaning_btn = (isset($_POST['show_get_free_cleaning_btn'])) ? $_POST['show_get_free_cleaning_btn'] : true;

   if($business_category != "") {
      $args = array(
         'tax_query' => array(
            'relation' => 'AND',
            array('taxonomy' => 'business_location', 'field'    => 'slug', 'terms'    => array($business_location)),
            array('taxonomy' => 'business_industry', 'field'    => 'slug', 'terms'    => array($business_industry)),
            array('taxonomy' => 'business_category', 'field'    => 'slug', 'terms'    => $business_category)),
      );
   } else {
      $args = array(
         'tax_query' => array(
            'relation' => 'AND',
            array('taxonomy' => 'business_location', 'field'    => 'slug', 'terms'    => array($business_location)),
            array('taxonomy' => 'business_industry', 'field'    => 'slug', 'terms'    => array($business_industry)),
         ),
      );
   }
   $args['post_type'] = 'business';
   $args['posts_per_page'] = $post_count;
   $args['post_status'] = 'publish';
    $updated_offset = (($page - 1) * $post_count);
    $args['offset'] = $updated_offset;
   $loop = new WP_Query($args);
   $out = '';
   if ($loop -> have_posts()) :
    while ($loop -> have_posts()) : $loop->the_post(); $post_id = get_the_ID();
            $out .= '<div class="businesses-wrap-content mb-10">';
            $out .= '<div class="d-flex">';
            $out .= '<div class="content-wrap pr-15"><div class="business-title"><h5 class="text-dark mb-2">'.get_the_title().'</h5>';
         $out .= '</div></div>'; //  content-wrap pr-15 closed
            $out .= '</div>'; // d-flex closed
            $out .= '</div>';
    endwhile;
   endif;
   wp_reset_postdata();
   die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

现在它将输出显示为：

--appended data
<div id="marketplace-businesses">
--appended data
</div>

单击“加载更多”按钮时，它将显示两次输出，一次在包装器div之外，另一次是包装器div的最后一个子项。

如何仅在包装器div的最后一个子项中显示加载更多数据？我在这里做错了什么？

Answer 1

我使用了button.text( load_more_txt ).prev().before(data);，它将为我复制数据。现在，我仅使用button.text( load_more_txt );在加载后显示按钮文本。立即检查此功能。

function load_posts(data, button, wrapper, max_page, load_more_txt ="View All"){
       $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: data,
            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success: function(data){
                if( data ) {
                    //button.text( load_more_txt ).prev().before(data);
                    button.text( load_more_txt );
                    ajax_posts.page++;
                wrapper.append(data);
                    if ( ajax_posts.page == max_page ) {
                        button.remove();
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
             $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
       });
       return false;
    }

这解决了我的问题。

如何使用ajax（WordPress）增加更多负载以获取自定义查询数据？

1 个答案: