当不再结果时,Ajax Infinate Scroll停止了



我的代码遇到了麻烦。因此,当我达到结果的末尾时,Ajax请求一遍又一遍地运行。我不确定该怎么做,但是我希望在数据库中没有更多结果时,Infinate Scroll停止运行。

最初的ajax请求到ajax-posts.php

var pageCategory = "' . $categoryId . '";
                    $.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                        initialize: true, pageCategory: pageCategory, resultLimit: 6
                    }).done(function(data) {
                        $("#primary #main").html(data);
                    });

然后ajax-posts.php中的代码

global $wpdb;
    global $post;
    $limit = $_POST['resultLimit'];
    $querystrMax = "SELECT {$wpdb->prefix}posts.ID, {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.post_excerpt, {$wpdb->prefix}posts.guid, {$wpdb->prefix}posts.post_date, {$wpdb->prefix}posts.post_author
        FROM {$wpdb->prefix}posts
        LEFT JOIN {$wpdb->prefix}term_relationships rel ON rel.object_id = {$wpdb->prefix}posts.ID
        LEFT JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_taxonomy_id = rel.term_taxonomy_id
        LEFT JOIN {$wpdb->prefix}terms t ON t.term_id = tax.term_id
        WHERE t.term_id = " . $_SESSION['pageCategory'] . "
        AND {$wpdb->prefix}posts.post_type = 'post' 
        ORDER BY {$wpdb->prefix}posts.post_date DESC
    ";
    $pagepostsMax = $wpdb->get_results($querystrMax, OBJECT);
    $maxPostNum = count($pagepostsMax);
    $querystr = "SELECT {$wpdb->prefix}posts.ID, {$wpdb->prefix}posts.post_title, {$wpdb->prefix}posts.post_excerpt, {$wpdb->prefix}posts.guid, {$wpdb->prefix}posts.post_date, {$wpdb->prefix}posts.post_author
    FROM {$wpdb->prefix}posts
    LEFT JOIN {$wpdb->prefix}term_relationships rel ON rel.object_id = {$wpdb->prefix}posts.ID
    LEFT JOIN {$wpdb->prefix}term_taxonomy tax ON tax.term_taxonomy_id = rel.term_taxonomy_id
    LEFT JOIN {$wpdb->prefix}terms t ON t.term_id = tax.term_id
    WHERE t.term_id = " . $_SESSION['pageCategory'] . "
    AND {$wpdb->prefix}posts.post_type = 'post' 
    ORDER BY {$wpdb->prefix}posts.post_date DESC
    LIMIT $limit
    ";
    $pageposts = $wpdb->get_results($querystr, OBJECT);
}
$pagePostsNum = count($pageposts);

$response = '';
if ($pagePostsNum <= ($maxPostNum - 6) ) {
    $response .= '
        <script type="text/javascript">
                jQuery(window).scroll(function() {
                    if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
                        var pageCategory = ' . $_SESSION['pageCategory'] . '
                        jQuery.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                            initialize: true, pageCategory: pageCategory, resultLimit: 6 + ' . $limit . '
                        }).done(function(data) {
                            jQuery("#primary #main").html(data);
                        });
                    }
                });
        </script>
    ';
}
else {
    $response .= '<p>No more results!</p>';
}

if ($pageposts):
    foreach ($pageposts as $post):
        $postId = get_the_ID();
        $postPermalink = get_the_permalink($postId);
        $postTitle = get_the_title();
        $response .= '
        <article class="gridView col-lg-4 col-md-6 col-xs-12">
            <div class="list-article-thumb" style="background: url('; if ( get_the_post_thumbnail_url() == false ) { $response .= get_stylesheet_directory_uri() . '/images/placholder2.png'; } else { $response .= get_the_post_thumbnail_url(); } $response .= ') no-repeat; height: 445px; background-size: cover; position: relative;">';

                <a href="' . esc_url( $postPermalink ) . '">
                    <div class="postLayoutOverlay"></div>
                </a>
            </div>
        </article>
        ';
    endforeach;
    wp_reset_query();
else :
    $response = '
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    ';
endif;
echo $response;

感谢其他溢出物。

好的,所以我弄清楚了。在最初的Ajax帖子中,有此initialize: true

所以在ajax-posts.php中我使用该帖子

检查了初始加载。
if (isset($_POST['initialize'])) {
    $response .= '
        <script type="text/javascript">
                jQuery(window).scroll(function() {
                    if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
                        var pageCategory = ' . $_SESSION['pageCategory'] . '
                        jQuery.post("/testwp2/wp-content/themes/my-theme/ajax-posts.php", {
                            initialize: true, pageCategory: pageCategory, resultLimit: 6 + ' . $limit . '
                        }).done(function(data) {
                            if (data != false) {
                                jQuery("#primary #main").html(data);
                            }
                        });
                    }
                });
                console.log();
        </script>
    ';
}

这样,只添加了一次脚本。然后,当我没有更多帖子可以显示时,我会使用此代码来解开滚动功能。

if ($limit <= $maxPostNum) {
    $response .= '
        <script type="text/javascript">
            jQuery(window).unbind("scroll");
        </script>
    ';
}

和voila,请享受。:D

最新更新