无限滚动我的博客主页使用ajax

你好，我有一个博客编码在PHP/codeigniter和我的主页（所有帖子都显示）我想在我的帖子上做一个无限滚动，以便我可以加载当我到达页面的底部时，还有7个。无限滚动我的博客主页使用ajax

这里是我的控制器：

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（）从我看来showoul负载对我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>

和我java的JavaScript文件..用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"),

我想调用控制器，它应该工作！但它不！

有什么建议吗？

来源

2013-02-15 emcee22

只是一个友好的方面说明 - 不附加处理程序的窗口滚动事件：http://ejohn.org/blog/learning-from-twitter/ – LeonardChallis 2013-02-15 11:59:29

好的感谢您的意见。除此之外，你对我解决这个问题有什么建议吗？或者可以给我另一个例子，我如何做这项工作？非常感谢 – emcee22 2013-02-15 12:03:31

http://stackoverflow.com/questions/13801197/load-more-content-from-an-array-using-codeigniter/13801594#13801594 这是我以前对此的回答。 – 2013-02-15 12:04:14

首先去获得无限滚动的jQuery插件在这里：http://www.infinite-scroll.com/，假设你有jQuery的...

有很多的例子，以供参考，所以我将通过快速的基本逻辑：

页面无负载！
页面完成加载，初始化无限滚动
Ajax的服务器，并获取帖子并加载它们。
用户向下滚动，当他触及底部时，或者您配置的是，则会加载更多。
重复步骤4

比建立一个自定义一个更容易和保持DOM有限。意思是你只有在DOM中显示的内容。

来源

2013-02-15 13:47:09 We0

我在普通的php和javascript/ajax中做了这个，但现在我使用codeigniter，所以我不知道如何使这项工作。 – emcee22 2013-02-15 14:58:06

这行：echo base_url（）/ welcome/index_show_post应该是echo base_url（）。 '/首页/ index_show_post' – We0 2013-02-18 09:18:02

无限滚动我的博客主页使用ajax

回答

相关问题