使用jquery在codeigniter中无限滚动

时间:2013-02-15 10:05:49

标签: jquery ajax codeigniter

大家好我觉得我有一个简单的问题:

我已经在代码点火器中创建了一个博客,这就是我的代码的样子:

这是我的home_page控制器:

public function index()
    {
        $data['posts'] = $this->Model_cats->getLivePosts(7);
        $data['cats'] = $this->Model_cats->getTopCategories(); 
        $data['title'] = 'Welcome';
        $data['main'] = 'public_home';
        $data['main2'] = 'public_home_loadpost';
        $this->load->vars($data);
        $this->load->view('template', $data);
    }

我用这个jquery来加载:

$(window).scroll(function())
{
    if( $(window).scrollTop() == $(document).height() - $(window).height() ){
        $('div#loadMoreComments').show();

        $.ajax({
            url: "WHAT PAGE PUTHERE.php?lastComment=" + $(".postedComment:last").attr("id"),
            success: function(html){
                if(html)
                {
                    $("#postedComments").append(html);
                    $('div#loadMoreComments').hide();

                }
                else
                {
                    $('div#loadMoreComments').replaceWith("Finished Loading the comments");
                }
            }
        });
    }

我真的不知道我可以在jquery文件中放入我的网址的页面...这个页面会为我收到更多帖子。请帮忙

我的观点看起来像这样

<?php

    if ( count($posts) )
    {
        foreach ($posts as $key => $list)
        {
            echo "<div class='postedComment'>";
            echo '<h2>'.$list['title'].'</h2>';
            echo auto_typography( word_limiter($list['body'], 200) );
            echo anchor('welcome/post/'.$list['id'],'read more >>');
            echo "</div>";
        }

        echo '<br/><br/>';
    }

?>

<div id='loadMoreComments' style="display:none;">hello</div>

1 个答案:

答案 0 :(得分:0)

您需要在控制器中创建另一个视图。该视图的url将由ajax函数调用,并以JSON格式返回数据或者您想要的任何内容。

这是一种使用ajax的简单方法。

非常简单的ajax视图示例(在控制器中):

public function ajax_get_current_date_time() {
    die(date('d-m-Y H:i:s'));
}

HTML:

<div>The current date and time: <b id="current_time"></b></div>

然后在前面的js:

$.ajax({
    url: "/controller/ajax_get_current_date_time",
    success: function(data){
        $('#current_time').html(data);
    }
});

根据您的情况,您可以更好地使用JSON。以下是使用JSON调用ajax的示例。

$.ajax({
    url: "/controller/ajax_get_post",
    type: 'GET',
    data: 'lastComment=' + $(".postedComment:last").attr("id"),
    dataType: 'JSON',
    success: function(data){
        // trigger function that will transform the JSON data into HTML
        add_post(data);
    }
});

请参阅JSON部分,请求的url必须返回JSON。有关JSON:click!

的更多信息