0

こんにちは、php/codeigniter でコーディングされたブログがあり、メイン ページ (すべての投稿が表示される場所) で、ページの下部に到達したときにさらに 7 つを読み込めるように、投稿を無限にスクロールしたいと考えています。

これが私のコントローラーです：

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

    public function index_show_post()
    {
        $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);
    }

私の意見では、関数 index_show_post() は、さらに 7 つの投稿を読み込みます。これが解決策かどうかはわかりませんが、助けが必要です!

これは私のモデルです:

function getLivePosts($limit)
    {
        $data = array();

        $this->db->limit($limit);
        $this->db->where('status', 'published');
        $this->db->order_by('pubdate', 'desc');
        $query = $this->db->get('posts');

        if($query->num_rows() > 0)
        {
            foreach($query->result_array() as $row)
            {
                $data[] = $row;
            }
        }

        $query->free_result();
        return $data;
    }

ビューは次のようになります。

<?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;"></div>

そして、私はjavascriptファイルをjaveします.. ajaxを使用して、これを実現したい:

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

        $.ajax({
            url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),
            success: function(html){
                if(html)
                {
                    $("#postedComments").append(html);
                    $('div#loadMoreComments').hide();

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

このコード行で：

url: "<?php echo base_url()/welcome/index_show_post?>?lastComment=" + $(".postedComment:last").attr("id"),

コントローラーを呼び出したいのですが、うまくいくはずです! しかし、そうではありません！

助言がありますか？

4

1 に答える 1

0

まず、ここで jquery の無限スクロール プラグインを取得します: http://www.infinite-scroll.com/、jquery があると仮定します...

参照用の例がたくさんあるので、基本的なロジックを簡単に説明します。

  1. 投稿なしでページが読み込まれます!
  2. ページの読み込みが完了し、無限スクロールが初期化されました
  3. Ajax はサーバーであり、投稿を取得してロードします。
  4. ユーザーが下にスクロールし、一番下に到達したとき、または設定した内容が何であれ、さらに読み込みます。
  5. 手順 4 を繰り返します

カスタムのものを構築するよりもはるかに簡単で、DOM を制限したままにします。つまり、表示されているものだけが DOM にあるということです。

于 2013-02-15T13:47:09.390 に答える