아약스를 사용하여 내 블로그 홈 페이지의 무한 스크롤

Question

안녕하세요 저는 PHP/codeigniter와 내 메인 페이지 (모든 게시물이 표시되는 곳)에 코드가있는 블로그를 가지고 있습니다. 내 게시물에 무한 스크롤을 만들어서로드 할 수 있도록하고 싶습니다. 페이지 하단에 7 개 더 있습니다. 내 의견 showoul 부하에서 나를 위해 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() :

여기 내 컨트롤러입니다! 이것이 해결책인지는 모르지만 도움이 필요하다!

이

내 모델 :

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> 

와 나는이 일어날 수 있도록 할 Ajax를 사용하여 .. 자바 스크립트 파일을 jave :

을

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

나는 컨트롤러를 호출하고 싶습니다! 하지만 그렇지 않습니다!

제안 사항?

Answer 1

우선 여기에 대한 jQuery 무한 스크롤 플러그인을 가서 ... 당신이 JQuery와이 가정 http://www.infinite-scroll.com/

나는 빠른 기본적인 논리를 통해 걸릴 수 있도록 많은 예제 참조가 있습니다

1. NO POSTS가있는 페이지로드!
2. 페이지로드 완료, 무한 스크롤 초기화
3. Ajax가 서버를 가져 와서로드합니다.
4. 사용자가 아래로 스크롤하고 아래쪽에 도달하거나 구성한 경우 더 많이로드합니다.
5. 반복은

맞춤 한 건물보다 훨씬 쉽게 4 단계와 제한된 DOM을 유지한다. DOM에 표시되는 내용 만 있습니다.