Question

基本上，每当我在JQuery中获得'click'事件时，我就能够使WP和AJAX加载页面。使用click事件它可以正常工作，但是，当它全部切换到滚动功能时，而不是正确地重新加载以下帖子或帖子（就像你点击时一样）它反而在指定的div中重新加载网站的整个页面。

这是我的代码：

Ajax.php

add_action('wp_ajax_nopriv_art_load_single','art_load_single');
add_action('wp_ajax_art_load_single','art_load_single');

function art_load_single(){

    $paged = $_POST["page"]+1;

    $query = new WP_Query(array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'paged' => $paged,
        'posts_per_page' => 1
    ));

    ?>


    <?php if($query->have_posts()):
        while($query->have_posts()): $query->the_post(); ?>

         <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
            <div class="entry-title">
              <?php the_title( '<h1>', '</h1>' ); ?>
                <h2 class="sub-headline">
                    <?php if ( ! has_excerpt() ) {
                        echo '';
                    } else { 
                        the_excerpt();
                    }   ?>        
                </h2>
            </div>

                <?php if ( has_post_thumbnail()) : ?>
                    <div class="article-featured-image">
                        <a href="<?php the_post_thumbnail_url('full'); ?>" rel="lightbox" title="<?php the_title(); ?>"><?php the_post_thumbnail('large'); ?></a>
                    </div>
                <?php endif; ?>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <?php the_content(); ?>
                <?php
                    wp_link_pages( array(
                        'before' => '<div class="page-links">' . __( 'Pages:', 'some_theme' ),
                        'after'  => '</div>',
                    ) );
                ?>



            </div><!-- .entry-content -->
         </article><!-- #post-## -->

     <?php endwhile;
        endif;
        wp_reset_postdata(); ?>


    <?php die();

}

负载more.js

var postContainer = document.getElementById('primary');
var request_in_progress = false;

$(window).scroll(function(){
    infiniteScroll();
});

function infiniteScroll(){
    var content_height = postContainer.offsetHeight;
    var current_y = window.innerHeight + window.pageYOffset;
    if(current_y >= content_height) 
        showSinglePost();
    } 
}

//$(document).on('click','.load-single-article', function(){
function showSinglePost(){

    if(request_in_progress) { return; }
    request_in_progress = true;

    var that = $(this);
    var page = that.data('page');
    var newPage = page+1;
    var ajaxurl = that.data('url');

    that.find('.text').html('LOADING...');

    $.ajax({

        url : ajaxurl,
        type : 'post',
        data : {
            page : page,
            action : 'art_load_single',
            dataType: 'post'
        },
        error : function( response ){
            console.log(response);
        },
        success : function( response ) {
            setTimeout(function(){

                that.data('page', newPage);
                $('#primary').append( response );

                that.find('.text').html('VIEW MORE');

                request_in_progress = false;

            }, 500);

        }

    });
}

为了以防万一，请离开“点击”事件。最后我点击的按钮如下：

<a class="view-btn load-single-article" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>"><span class="text">VIEW MORE</span></a>

对于AJAX稍微有点新意我相信它可能只是在点击时调用URL时的反应与在滚动时加载时的反应不同，或者点击只是作为一个侥幸。任何帮助表示赞赏！

Answer 1

这是你想要的剥离版本，所以你应该能够插入你自己的文章加载等。它开始时已经加载了一堆文章，当你滚动它时检查一下你是一个页面。如果您位于页面底部，则会加载新文章并将其附加。

＆＃13;

//adding name by name to an array
$data = array('user_first' => $this->input->post('user_first'));

adding the entire post array
//as u have the same "name" in the form than the array u are sending to the db insert method
$data = $this->input->post();
//in short $this->input->post() is $_POST array, but cleaned 

//or getting the values from $_POST
$data = array('user_first' => $_POST['user_first']);

＆＃13;

var articleCount = 0;
var $window = $(window);
var $body = $("body");

$window.on("scroll", function() {
    // check to see if we're near the bottom of the page
    if ($window.scrollTop() > $body.height() - $window.innerHeight()) {
        // we are at the bottom, so load a new article
        loadNextArticle();
  }
});

// make this function actually load an article and append it to the page
function loadNextArticle() {
    articleCount++;
    $body.append("<div class=\"single-article\">I am article number " + articleCount + "</div>");
}

// create some articles when the page loads...
for (var i = 0; i < 6; i++) {
    loadNextArticle();
}

＆＃13;

.single-article {
  background-color: rgb(230, 230, 240);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: 200px;
  margin: 10px;
  padding: 20px;
}

＆＃13;

显然，您需要对此进行修改以满足您的特定要求，但我已尽力使其尽可能通用。实际上，您应该能够将Javascript复制/粘贴到您的站点中，并交换出加载和附加新文章的部分。

滚动AJAX重新加载WordPress中div内的页面

1 个答案: