0

Hello i have a blog codded in php/codeigniter and on my main page(where all the posts are displayed) i want to make an infinite scroll on my posts so that i can load 7 more when i reach the bottom of the page.

Here is my controller:

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);
    }

The function index_show_post() from my opinion showoul load 7 more posts for me! i don't know if this is the solution but i sure need help!

this is my model:

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;
    }

and the view looks like this:

<?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>

and i jave the javascript file.. using ajax i want to make this happen:

$(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");
                }
            }
        });
    }
});

in this line of code:

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

i would like to call the controller and it should work! but it doesn't!

Any suggestions?

emcee22
  • 1,851
  • 6
  • 23
  • 32
  • Just a friendly side note - don't attach handlers to the window scroll event: http://ejohn.org/blog/learning-from-twitter/ – LeonardChallis Feb 15 '13 at 11:59
  • ok thanks for the advice. Besides that, you got any suggestions for me solving this problem? or maybe give me another example on how can i make this work? thanks a lot – emcee22 Feb 15 '13 at 12:03
  • http://stackoverflow.com/questions/13801197/load-more-content-from-an-array-using-codeigniter/13801594#13801594 Here's a previous answer of mine regarding this. – Robin Castlin Feb 15 '13 at 12:04
  • can you show me a code that would work in my case? i think i have all you need to make this work... i have problems with the url in the $.ajax and i don't know exactly what goes where. thank you for the support – emcee22 Feb 15 '13 at 12:12
  • This line: echo base_url()/welcome/index_show_post should be echo base_url() . '/welcome/index_show_post'; – We0 Feb 18 '13 at 09:17

1 Answers1

0

Firstly go get infinite scroll plugin for jquery here: http://www.infinite-scroll.com/, assuming you have jquery...

There are a lot of examples there for reference so I will take through the basic logic quick:

  1. Page Loads with NO POSTS!
  2. Page done loading, initialise infinite scroll
  3. Ajax's your server and gets posts and loads them.
  4. User scrolls down and when he hits bottom, or what ever you configured, it loads more.
  5. Repeats step 4

Much easier than building a custom one and keeps the DOM limited. Meaning you only have in the DOM what is being displayed.

We0
  • 1,139
  • 2
  • 9
  • 22
  • i did this in plain php and javascript/ajax but now i am using codeigniter so i don't know how to make this work. – emcee22 Feb 15 '13 at 14:58
  • This line: echo base_url()/welcome/index_show_post should be echo base_url() . '/welcome/index_show_post' – We0 Feb 18 '13 at 09:18