Как реализовать бесконечную прокрутку с помощью триггера jquery или обходной путь

Я пытаюсь заставить бесконечную прокрутку внутри div работать на основе настроек в этой теме. В нижней части списка есть ссылка «загрузить еще», при нажатии на которую контент загружается через ajax. Я работаю с WP (последняя версия) и Buddypress (последняя версия). Я нашел небольшую хитрость, чтобы обойти это, так как я не силен в запросах и php. Это наполовину работает, так как вызывает инициированный «щелчок» и загружает контент, но каждый раз, когда пользователь продолжает прокручивать, он продолжает загружать контент. Он загружает последние два набора (дубликаты), а затем выдает ошибку, когда нет контента для загрузки для каждой прокрутки, что по умолчанию отображается только тогда, когда во время загрузки страницы нет контента для загрузки. Во-первых, это скрипт, в котором работает ссылка «загрузить еще»:

jq('div.activity').click( function(event) {
    var target = jq(event.target);

    if ( target.parent().hasClass('load-more') ) {
        jq("li.load-more").addClass('loading');

        if ( null == jq.cookie('bp-activity-oldestpage') )
            jq.cookie('bp-activity-oldestpage', 1, {path: '/'} );

        var oldest_page = ( jq.cookie('bp-activity-oldestpage') * 1 ) + 1;

        jq.post( ajaxurl, {
            action: 'activity_get_older_updates',
            'cookie': encodeURIComponent(document.cookie),
            'page': oldest_page
        },
        function(response)
        {
            jq("#content li.load-more").removeClass('loading');
            jq.cookie( 'bp-activity-oldestpage', oldest_page, {path: '/'} );
            jq("#content ul.activity-list").append( response.contents, function(){

            jq('li.post').hide().each(function(index) {
                timeOuts[index] = setTimeout(myFadeIn, index*100, jq(this));
            });
            });
            target.parent().hide();

        }, 'json' );


        return false;
    }
});
});

это небольшой обходной путь, который вызывает нажатие этой ссылки, когда пользователь прокручивает до конца div #content:

jq( function($) {
$('#content').bind('scroll', function() {
    if($(this).scrollTop() + 
       $(this).innerHeight()
        >= $(this)[0].scrollHeight)
       {
        jq("#content li.load-more a").trigger('click', function(e){
        e.preventDefault();
        });

        }
     })
});

Вот HTML-код, который на всякий случай включает цикл:

<div id="content">
<div class="activity">
<?php if ( bp_has_activities( bp_ajax_querystring( 'activity' ) ) ) : ?>

<?php /* Show pagination if JS is not enabled, since the "Load More" link will do nothing */ ?>
<noscript>
    <div class="pagination">
        <div class="pag-count"><?php bp_activity_pagination_count(); ?></div>
        <div class="pagination-links"><?php bp_activity_pagination_links(); ?></div>
    </div>
</noscript>

<?php if ( empty( $_POST['page'] ) ) : ?>

    <ul id="activity-stream" class="activity-list item-list">

<?php endif; ?>

<?php while ( bp_activities() ) : bp_the_activity(); ?>

    <?php locate_template( array( 'activity/entry.php' ), true, false ); ?>

<?php endwhile; ?>

<?php if ( bp_activity_has_more_items() ) : ?>

    <li class="load-more yori">
        <a class="thiss" href="#more"><?php _e( 'Load More', 'buddypress' ); ?></a>
    </li>

<?php endif; ?>

<?php if ( empty( $_POST['page'] ) ) : ?>

    </ul>

<?php endif; ?>

<?php else : ?>

<div id="message" class="info">
    <p><?php _e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ); ?></p>
</div>

<?php endif; ?>

</div>
</div>

Как я уже сказал, это работает, но с ошибками и довольно небрежно, потому что я знаю, что есть более чистый способ сделать это, лол. Вот что я пытаюсь выяснить. Я перепробовал так много плагинов бесконечной прокрутки, в том числе от WP, но они, похоже, не работают с тем, что я пытаюсь сделать. Я думаю, что это как-то связано с тем, как Buddypress настроил «загрузить больше». Нет ничего невозможного, поэтому мне нужна ваша помощь, ребята :)


person Sin    schedule 11.04.2012    source источник


Ответы (2)


Я добился этой функциональности, я объясню это здесь с помощью фрагмента кода, который вы можете применить. Ваше здоровье ;)

http://buddypress.org/community/groups/creating-extending/forum/topic/auto-load-more-activity-stream-items-when-scroll-reaches-the-bottom-of-the-page/?topic_page=1&num=15

person Juanma Guerrero    schedule 15.06.2012
comment
Я пытаюсь добавить его сейчас, но будет ли это работать внутри прокручиваемого элемента div? - person Sin; 15.06.2012
comment
Если вы хотите, чтобы новые элементы ajax загружались только при прокрутке вашего div, вы можете изменить прослушиватель событий javascript/jquery, чтобы он применялся только к вашему элементу div. Надеюсь, это поможет. - person Juanma Guerrero; 15.06.2012
comment
сладкий! я заставил его работать, теперь моя единственная проблема, я думаю, это высота div, прежде чем он вызовет следующий набор загруженных элементов. моя высота div составляет 473 пикселя, в javascript -500 для .height() . Я могу понять это, хотя, еще раз, большое спасибо, вы потрясающие для этого! - person Sin; 16.06.2012
comment
У меня проблемы с математикой на высоте(). его загрузка следующего набора, когда я прокручиваю мельчайший бит. Любые идеи? - person Sin; 18.06.2012
comment
И тебе привет! Пожалуйста, посмотрите, не расположен ли pixelMonitor относительно окна вместо вашего div. Вам нужно будет настроить код, чтобы слушать прокрутку вашего div, pixelMonitor должен быть внизу вашего div (а не в окне), а измеренная высота должна быть не содержимым страницы, а вашим div;) - person Juanma Guerrero; 21.06.2012
comment
хорошо, я играю с кодом прямо сейчас. Так остается ли высота() -500 равной -500? или я должен также настроить это число в зависимости от высоты моего div? что касается pixelMonitor, ничего не меняется, когда я правильно помещаю его в свой div. Если я немного прокручиваю, загружается больше контента, а также я получаю дубликаты. Я собираюсь поиграть с ним еще немного и посмотреть, не смогу ли я его запустить - person Sin; 24.06.2012
comment
Если вам интересно, как сделать это легко и сделать это менее сложным - я бы использовал функции добавления и загрузки jQuery... Не пытаясь раздражать, но я буквально только что закончил писать сообщение в блоге именно об этом: benjaminpotter.org/infinite-scroll - person Ben Potter; 07.08.2012

Используйте этот плагин Wordpress, может быть, он вам пригодится

http://wordpress.org/extend/plugins/infinite-scroll/
person vicky    schedule 11.04.2012
comment
Я уже пробовал этот, это был первый, который я попробовал. Кажется, есть проблема с тем, как он извлекает содержимое в BP через разбиение на страницы. Все равно спасибо :) - person Sin; 11.04.2012