Ajax Scroll加载运行功能但不加载内容的帖子项

时间:2015-07-08 16:20:33

标签: javascript jquery ajax

我的脚本出现问题。我要做的是首先在按钮点击中查看新帖子,然后进入视图,然后重置原始容器(这可行)。

我面临的问题是我想在滚动(自定义字段)上加载帖子内容。我的脚本似乎运行但加载帖子内容时出现问题。请参阅下面的代码。

HTML: -one.html交

<div id="default" class="main">
    <div id="imageContainer" style="background:url(images/bg.jpg) no-repeat center center; background-size:cover;">
        <a href="http://www.example.com/next-post" class="button"></a>
    </div>
    <div id="introContentContainer" class="content">
        <div class="postContent-1 post">
            <h1>heading</h1>
            <p>paragraph.</p>
        </div>
    </div>
    <div id="postContentContainer" class="content"></div>
</div>

<div id="load" class="direction"></div>

HTML: 下一post.html

<div id="default" class="main">
    <div id="imageContainer" style="background:url(images/bg2.jpg) no-repeat center center; background-size:cover;">
        <a href="http://www.example.com/post-one" class="button"></a>
    </div>
    <div id="introContentContainer" class="content">
        <div class="postContent-1 post">
            <h1>heading</h1>
            <p>paragraph.</p>
        </div>
    </div>
    <div id="postContentContainer" class="content">
        <div class="postContent-2 post">
            <h2>Content Two</h2>
            <p>para 2</p>
        </div>
        <div class="postContent-3 post">
             <h2>Content Three</h2>
             <p>para 3</p>
        </div>
        <div class="postContent-4 post">
            <h2>Content Four</h2>
            <p>para 4</p>
        </div>
    </div>
</div>

<div id="load" class="direction"></div>

JQUERY:

var processing;
var count = 0;

$(document).ready(function(){
    $.ajaxSetup({cache:false});

    $('body').on('click', 'a', function(e){
        e.preventDefault();
        var self = this;
        history.pushState({ path: this.path }, '', this.href);
        history.replaceState({ path: this.path }, '', this.href);
        RightSlide(self);           
        return false;
    });

    function RightSlide(self) {

        //Unbind Scroll Event
        $(window).unbind('scroll');
        console.log('unbind scroll');

        // Get next link URL
        var post_id = $(self).attr('href');

        // Load new top content in offset slide
        $.get(post_id, {}, function(data) {
            var $response = $('<div />').html(data);
            var $image = $response.find('#imageContainer')
            var $content = $response.find('#introContentContainer')
            $('.direction').append($image).append($content);;
            setTimeout(function(){$('.direction').show('slide',{direction: 'right', easing: 'easeOutCubic'}, 600);$('.main').hide('slide', { direction: 'left', easing: 'easeOutCubic' }, 600);},100);
            setTimeout(function(){
                // Reset slider                 
                if($('#default').hasClass('main')) {
                    $('#default').addClass('direction').removeClass('main');
                } else {
                    $('#default').addClass('main').removeClass('direction');
                }
                if($('#load').hasClass('main')) {
                    $('#load').addClass('direction').removeClass('main');   
                } else {
                    $('#load').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();
            },700);
            setScroll();
            console.log('bind scroll');
            return false;
        },'html');
    };

    function setScroll() {
        $(document).bind('scroll', function(e){
            if (processing)
                return false;
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10){
                processing = true;
                console.log('the function is processing ' + processing);
                getResults();
            }
        }); 
    }

    function getResults() {
        var url = window.location.href;
        console.log(url);
        $('#postContentContainer').load(url + ' .postContent-2', function(){
            count++;
            console.log('why doesnt this run!');
            return false;
        });
        console.log('run scroll function');
        processing = false; 
    }

以下是目前为止的步骤:

1)点击按钮,在视图中加载新帖子。

2)滑入视口,滑出旧容器&amp;重置课程。

3)在滚动提取新页面后div“.postContent-2”(这最终将是动态的)但是这会失败。

任何人都可以看到为什么这不起作用?任何人都可以帮忙解决问题吗?

谢谢,

安德鲁

1 个答案:

答案 0 :(得分:0)

有这个工作!

将我的getResults函数更改为此

function getResults() {
    var url = window.location.href;
        console.log(url);

        $.ajax({
            url : url,
            type: 'GET',
            success: function(data) {

            var html = jQuery('<div>').html(data);
            var $newcontent = html.find('.postContent-2');

            $('#introContentContainer').append($newcontent);
            console.log('this now runs!');
            return false;
        }
    });

    console.log('run scroll function');
    processing = false; 
}