jQuery / WordPress: AJAX ile yüklenen yeni içerik için sonsuz kaydırma efekti uygulayabilirsiniz

0 Cevap php

Bu yüzden AJAX ile farklı bir PHP dosyasından yeni bir halka yükler bazı özel jQuery ile birlikte jQuery sonsuz kaydırma eklenti kullanmak çalışıyorum. Sonsuz kaydırma ilk sayfa içeriği üzerinde çalışır, ama yeni yüklenen içeriği ile çalışmak için alınamıyor. İşte AJAX mantığı nasıl çalışıyor:

  1. Bir kategoriye tıklayın
  2. Get category ID which is stored in the REL attribute
  3. Bir değişken olarak bu kimliği Mağaza
  4. Pass the variable as an argument to a loop in a different PHP file and load that section of the PHP file

Sonsuz kaydırma tuşu parçaları komut aşağıdaki bulabilirsiniz vardır:

  1. (yeni içerik için ilk içerik ve # filterPageNav için # pagenav) mesajların sonraki sayfaya bağlantısını işaret içeren eleman
  2. Mesajların bir sonraki sayfada (# beyondInfinity) için linki işaretleme
  3. mesajları içeren div
  4. ileti kendileri

Bu sorunun bir parçası olabilir. Diğer sorun $ _POST ['id'] çağrı belleği kategori mesajların çeşitli sayfalara doğru nakledilen olmadığını olabilir:.. ("../category-filter/page/2", "/ Kategori -filter/page/3 "vb)

Herhangi bir fikir veya yardım çok takdir!

EDIT / ADDITION 8/17:

Ben (veya) AJAX category__in'=>array($_POST['id']) kesinlikle örneğin, sabit bir kategori varsayarak ilk cevap daha kolay olurdu aracılığıyla yüklenen kategori ile dış döngü sonsuz kaydırma uygulanması hakkında soruyu yanıtlamadan önce {[(1 )]} yerine. Herkes bu basitleştirilmiş sorun için herhangi bir fikir veya cevabı var eğer öyleyse de harika olurdu!

İşte 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 } ?>

İşte yüklenen içerik için PHP şablon:

<?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(); ?>

İşte (etki alanı adı kaldırıldı) sayfalama fonksiyonu HTML çıktısı bulunuyor:

<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'> &raquo; </a></div>

0 Cevap