Поэтому я пытаюсь использовать плагин бесконечной прокрутки jQuery в сочетании с каким-то пользовательским jQuery, который загружает новый цикл из другого PHP-файла с помощью AJAX. Бесконечная прокрутка работает с начальным содержимым страницы, но я не могу заставить его работать с вновь загруженным содержимым. Вот как работает логика AJAX:
- нажмите на категорию
- Получить идентификатор категории, который хранится в
атрибут REL
- Сохранить этот идентификатор как переменную
- Передать переменную в качестве аргумента
цикл в другом файле PHP и
загрузить этот раздел файла PHP
Ключевые элементы бесконечной прокрутки в том, что скрипт может найти следующее:
- элемент, содержащий ссылку, указывающую на следующую страницу сообщений (#pageNav для исходного содержимого и #filterPageNav для нового содержимого)
- Ссылка, указывающая на следующую страницу сообщений (#beyondInfinity)
- div, содержащий сообщения
- сами сообщения
Это может быть частью проблемы. Другая проблема может заключаться в том, что вызов $ _POST ['id'] неправильно публикуется на различных страницах постатейных сообщений категории: ("../category-filter/page/2", "../category -filter / page / 3 "и т. д.)
Любое понимание или помощь очень ценится !!!
РЕДАКТИРОВАНИЕ / ДОПОЛНЕНИЕ 8/17:
Прежде чем я (или вы) ответим на вопрос о применении бесконечной прокрутки к внешнему циклу с категорией, загруженной через AJAX category__in'=>array($_POST['id']), было бы, конечно, легче ответить сначала, предполагая фиксированную категорию, например category__in'=>array(13). Так что, если у кого-то есть понимание или ответы на эту упрощенную проблему, это также было бы здорово!
Вот JQUERY:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<?php if( is_home() ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/spritely.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Add Loading Image
$('body').append('<div id="catFilterLoading"></div>');
$('#catFilterLoading').pan({fps: 30, speed: 1000, dir: 'right', depth: '1'});
//Filter Categories
$.ajaxSetup({cache:false});
$('#categoryContainer ul li a').click( function() {
$('#catFilterLoading').show();
//Remove the initial page navigation + the infinite scroll script
$('#pageNav, #documentInfinite').remove();
//Get the category ID, stored in the REL attr
var cat_id = $(this).attr('rel');
//Load the '#filter' div and post the cat_id to that page to be used in the new loop
$("#content").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/category-filter/ #filter",{id:cat_id}, function() {
//This is the call back function for load()
//Do this stuff once the new content has finished loading
//hide the loading graphic
$('#catFilterLoading').hide();
//apply a new infinite scroll effect to the loaded content
$('#filter').infinitescroll({
navSelector : "#filterPageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#filter .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
return false;
})
});
</script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/init.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/infinite-scroll.min.js"></script>
<?php if( is_home() ) { ?>
<script id="documentInfinite" type="text/javascript">
$(document).ready(function() {
$('#content').infinitescroll({
navSelector : "#pageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#content .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
</script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavHome.js"></script>
<?php } else { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavPage.js"></script>
<?php } ?>
Вот шаблон PHP для загруженного контента:
<?php
/*
Template Name: categoryFilter
*/
?>
<?php
get_header();
?>
<h3 id="thinkingH3">Latest Thinking</h3>
<div id="content">
<div id="filter">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( !is_paged() ) {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
} else {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
}
query_posts($args);
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="post <?php echo $_POST['id']; ?>">
<div class="postExcerpt">
<span class="postDateOutter"></span>
<span class="postDate"><?php the_time('m.d.Y') ?></span>
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/post.jpg" alt="post image" />
<h2><?php the_title(); ?></h2>
<?php the_advanced_excerpt(); ?>
<a class="readFull" href="#">Read Full Post</a>
</div>
<div class="postAuthor">
<?php echo get_avatar( get_the_author_email(), '120' ); ?>
<b><?php the_author(); ?></b>
<b>Comments: <?php comments_number('0', 'one', '%'); ?> </b>
<b>Thinking About</b>
<ul>
<?php swift_list_cats(7); ?>
</ul>
</div>
</div> <!-- post -->
<?php endwhile; endif; ?>
<div id="filterPageNav"><?php get_pagination(); ?></div>
</div> <!-- filter -->
</div> <!-- content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Вот HTML-вывод функции разбивки на страницы (удалено доменное имя):
<div id="pageNav"><a id='pageIndicator'>Page <span>1 <i>of</i> 4</span></a><a href='http://....com/' class='current pageNumbers'>1</a><a href='http://../page/2' class='pageNumbers'>2</a><a href='http://....com/page/3' class='pageNumbers'>3</a><a href='http://....com/page/4' class='pageNumbers'>4</a><a href="http://.../page/2" id="beyondInfinity"><i>Next</i> </a> <a href='http://.../page/4'> » </a></div>