WordPress延迟加载

时间:2019-06-24 11:11:23

标签: javascript ajax wordpress lazy-loading

您好,我正在通过分页在WordPress中实现延迟加载 它工作正常,但当我向下滚动时会重复数据 例如,如果预期结果仅为4个帖子,而我向下滚动,它会重复重复这4个帖子  这是我的JavaScript代码

<script>
$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
var urlString = window.location.href;
var url = new URL( urlString );
var offer = url.searchParams.get("offer");
var purpose = url.searchParams.get("purpose");
jQuery(function($){
    $('.property-listings').append( '<span class="load-more"></span>' );
    var button = $('.property-listings .load-more'),
        page = 2,
        loading = false,
        scrollHandling = {
            allow: true,
            reallow: function() {
                scrollHandling.allow = true;
            },
            delay: 400
        };
    $(window).scroll(function(){
        var scrollPos = $(window).scrollTop();
        if ( ! loading && scrollHandling.allow ) {
            scrollHandling.allow = false;
            setTimeout( scrollHandling.reallow,scrollHandling.delay );
            var offset = $(button).offset().top - $(window).scrollTop();
            if ( 2000 > offset ) {
                loading = true;
                $('.loader-wrap').css({display: 'flex'});
                var data = {
                    'action':       'load_posts_by_ajax',
                    'page':         page,
                };
                if ( offer ) {
                    data.offer = offer;
                }
                if ( purpose ) {
                    data.purpose = purpose;
                }
                // console.log(data);
                $.post($ajaxurl, data, function(response) {
                    if( response.data != "" ) {
                        $('.property-listings .content-wrap').append(response.data);
                        $('.property-listings').append( button );
                        page++;
                        $('.loader-wrap').css({display: 'none'});
                        loading = false;
                    }else{
                        $('.loader-wrap').css({display: 'none'});
                        scrollHandling.allow = false;
                    }
                });
            }
        }
    });
});

如果发现另一张具有相同名称的卡,有一种告诉它停止的方法

这也是WordPress代码

    <?php

/**

 * The template for displaying find properties page.

 *

 * This is the template that displays only find-properties page.

 *

 * @package WAKEB

 */

get_header();

if (!empty($_GET['region'])){

    $args =array(
        'post_type'      => 'project',
        'posts_per_page' => -1,
        'tax_query'      => array(
            array(
                'taxonomy'    => 'regions',
                'field'       => 'id',
                'terms'       => $_GET['region'],
            ),
        ),
    );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $projectsid[] = get_the_ID();
        }
    }else{
        $projectsid=array(0);
    }
}
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
$args = array (
    'post_type' => 'unit',
    'posts_per_page' => 4,
    'paged' => 1,
);
if (!empty($_GET['ctype'])){
    $args['tax_query'] = array (
        array(
            'taxonomy' => 'ctypes',
            'terms'    => $_GET['ctype'],
        ),
    );
}
if (!empty($_GET['ptype'])){
    $args['tax_query'] = array (
        array(
            'taxonomy' => 'uptypes',
            'terms'    => $_GET['ptype'],
        ),
    );
}
if (!empty($_GET['pro'])){
    $args['meta_key'] = 'WAKEB_project';
    $args['meta_value'] = $_GET['pro'];
}
if(!empty($_GET['k'])){
    $args['s'] = $_GET['k'];
}
if(isset($projectsid)){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_project',
        'value'  => $projectsid,
        'compare' => 'IN',
        'type'   => 'NUMERIC',
    );
}
if(!empty($_GET['area1']) && !empty($_GET['area2'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_unitarea',
        'value'  => array($_GET['area1'], $_GET['area2']),
        'compare' => 'BETWEEN',
        'type'   => 'NUMERIC',
    );
}elseif(!empty($_GET['area1'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_unitarea',
        'value'  => $_GET['area1'],
        'compare' => '>=',
        'type'   => 'NUMERIC',
    );
}elseif(!empty($_GET['area2'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_unitarea',
        'value'  => $_GET['area2'],
        'compare' => '<=',
        'type'   => 'NUMERIC',
    );
}
if(!empty($_GET['price1']) && !empty($_GET['price2'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_price',
        'value'  => array($_GET['price1'], $_GET['price2']),
        'compare' => 'BETWEEN',
        'type'   => 'NUMERIC',
    );
}elseif(!empty($_GET['price1'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_price',
        'value'  => $_GET['price1'],
        'compare' => '>=',
        'type'   => 'NUMERIC',
    );
}elseif(!empty($_GET['price2'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_price',
        'value'  => $_GET['price2'],
        'compare' => '<=',
        'type'   => 'NUMERIC',
    );
}
if(!empty($_GET['purpose'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_vacation',
        'value'  => '1',
        'compare' => '=',
    );
}
if(!empty($_GET['offer'])){
    $args['meta_query'][] = array(
        'key'    => 'WAKEB_hot',
        'value'  => '1',
        'compare' => '=',
    );
}

?>
<div class="fixed-search">
    <form method="get" action="<?php bloginfo('wpurl'); ?>/find-properties/" name="find-units">
        <div class="content-wrap">
            <div class="form-group">
                <div class="form-field">
                    <input type="search" placeholder="<?php _e('Search', 'WAKEB'); ?>" name="k" id="k"> 
                </div>
                <div class="form-field">
                    <div id="toggle-ctype" class="filter"><?php _e('Filter by contract type', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="ctype-select">
                        <?php 
                            $ctype_args = array (
                                'orderby'     => 'menu_order',
                                'hide_empty'  => false,
                            );
                            $Contract_types = get_terms('ctypes', $ctype_args);
                            foreach ($Contract_types as $ctype){
                                if ( !get_field( 'hide', 'ctypes_'. $ctype->term_id ) ) :
                                    echo '<div class="checkbox">';
                                    echo '<label  class="item"><input type="checkbox" name="ctype[]" value="'.$ctype->term_id.'"><span class="checkmark"></span>'.$ctype->name.'</label>';
                                    echo '</div>';
                                endif;
                            }
                        ?>
                    </div>
                </div>
                <div class="form-field">
                    <div id="toggle-ptype" class="filter"><?php _e('Filter by purpose type', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="ptype-select">
                        <?php 
                            $ptype_args = array (
                                'orderby'     => 'menu_order',
                                'hide_empty'  => false,
                            );
                            $Purpose_types = get_terms('uptypes', $ptype_args);
                            foreach ($Purpose_types as $ptype){
                                if ( !get_field( 'hide', 'uptypes_'. $ptype->term_id ) ) :
                                    echo '<div class="checkbox">';
                                    echo '<label  class="item"><input type="checkbox" name="ptype[]" value="'.$ptype->term_id.'"><span class="checkmark"></span>'.$ptype->name.'</label>';
                                    echo '</div>';
                                endif;
                            }
                        ?>
                    </div>
                </div>
                <div class="form-field">
                    <div id="toggle-proj" class="filter"><?php _e('Filter by compound', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="proj-select">
                        <?php
                            $pro_args = array ('post_type' => 'project', 'posts_per_page' => -1,);
                            $query = new WP_Query( $pro_args );
                            if($query->have_posts()){
                                while($query->have_posts()){
                                    $query->the_post();
                                    echo '<div class="checkbox">';
                                    echo '<label  class="item"><input type="checkbox" name="pro[]" value="'.get_the_ID().'"><span class="checkmark"></span>';
                                            $name = rwmb_meta('WAKEB_card_name');
                                            if ( $name ) { echo $name; }else{ the_title(); }
                                    echo '</label>';
                                    echo '</div>';
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="form-field">
                    <div id="toggle-regions" class="filter"><?php _e('Filter by region', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="regions-select">
                        <?php 
                            echo '<ul>';
                            draw_tree_for_regions(0);
                            function draw_tree_for_regions($p_id){
                                $reg_args = array (
                                    'orderby'    => 'menu_order',
                                    'hide_empty' => false,
                                    'parent'     => $p_id,
                                );
                                $allregions = get_terms('regions', $reg_args);
                                foreach ($allregions as $region){
                                    if ( !get_field( 'hide', 'regions_'. $region->term_id ) ) :
                                        echo '<li><div class="checkbox">';
                                        echo '<label  class="item"><input type="checkbox" name="region[]" value="'.$region->term_id.'"><span class="checkmark"></span>'.$region->name.'</label>';
                                        echo '</div>';
                                        $children=get_term_children($region->term_id, 'regions');
                                        if($children){
                                            echo '<ul>';
                                            draw_tree_for_regions($region->term_id);
                                            echo '</ul>';
                                        }
                                        echo '</li>';
                                    endif;
                                }
                            }
                            echo '</ul>';
                        ?>
                    </div>
                </div>
                <div class="form-field">
                    <div id="toggle-area" class="filter"><?php _e('Filter by Area', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="area-select">
                        <div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="area1" id="area1" > </div>
                        <div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="area2" id="area2" ></div>
                    </div>
                </div>
                <div class="form-field">
                    <div id="toggle-price" class="filter"><?php _e('Filter by Price', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="price-select">
                        <div class="checkbox"><input type="search" placeholder="<?php _e('From', 'WAKEB'); ?>" name="price1" id="price1" > </div>
                        <div class="checkbox"><input type="search" placeholder="<?php _e('To', 'WAKEB'); ?>" name="price2" id="price2" > </div>
                    </div>
                </div>
                <div class="form-field">
                    <button type="submit"><?php _e( 'Search', 'WAKEB' ); ?></button>
                </div>
            </div>
        </div>
    </form>
</div>
<section class="content-search-result page-section">
    <div class="section-title"><h2><?php _e('AVAILABLE UNITS', 'WAKEB'); ?></h2></div>
    <ul class="unit-terms">
        <div class="content-wrap">
            <?php
                $tax_args = array( 'taxonomy' => 'utypes', 'hide_empty' => false );
                $ptypes = get_terms( $tax_args );
                foreach ( $ptypes as $ptype ) {
                    echo '<li><a href="'. get_term_link( $ptype->term_id ) .'">'. $ptype->name .'</a></li>';
                }
            ?>
        </div>
    </ul>
    <?php
        $query = new WP_Query( $args );
        if($query->have_posts()){ ?>
            <ul class="property-listings">
                <div class="content-wrap">
                    <?php 
                        while ( $query->have_posts() ) : $query->the_post();
                            get_template_part("template-parts/units");
                        endwhile; 
                    ?>
                </div>
            </ul>
            <?php echo '<div class="loader-wrap"><div class="lds-facebook"><div></div><div></div><div></div></div></div>';
        }else{
            echo '<div class="no-result">'. _e( 'No results found...', 'WAKEB' ) .'</div>';
        }
    ?>
</section>

这是完整的WordPress存储库(使用PHP 5.6)的链接。 https://github.com/Ov3rControl/hoomerz

它重复了数据,如图所示 之后,它仍然从我正在搜索的内容中加载无关的数据 例如,如果我正在埃及寻找公寓 它会从埃及获得所有公寓,然后在我滚动时重复它们,然后我仍会获得数据,但是从不相关的地方,例如美国

这是问题的实时链接 http://beta.hoomerz.com/find-properties/?k=&region%5B%5D=218&area1=&area2=&price1=&price2= 搜索只能是第一条帖子,并且不应加载任何其他不相关事件数据

1 个答案:

答案 0 :(得分:0)

您是从PHP输出上面的脚本代码吗?你有这行:

$ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

除非您上面显示的整个脚本在php文件中并且包含echo()或print()语句的一部分,否则它将不起作用。使用wp_localize_script()安全正确地在HTML中输出admin_url('amin-ajax.php')的值,然后使用JavaScript从DOM中获取值并在必要时使用它。

除此之外,您的AJAX调用使用$ .post,但您的PHP正在检查$ _GET。选择一种方法并使用它-在这种情况下,$ _GET更合适。