Codeigniter scrollpagination

Question

I am using jquery plugin scrollpagination in codeigniter i am facing problem that my loop does not terminate and alos not giving accurate result.

this is my html code

<div id="main">
    <div id='friend_display'>
    <?php if($list->num_rows() > 0  ){
            foreach($list->result() as $show)
            {   ?>

    <div class="image-box" style="margin-left:30px" id='image-holder' >

        <div class="photo-cover">
            <a href="<?=base_url()?>uploads/user_images/<?php echo $show->user_image;?>" class="big-image"><img width="160px" height="117px" src="<?=base_url()?>uploads/user_images/friends/<?php echo $show->user_image;?>" alt="" /></a>
        </div>

        <p class="photo-name"><b><?php echo $show->user_name;?></b></p>


    </div>
    <?php } } else { echo '<div align="center" style="color:#FF0000; font-size:17px; font-weight:bold">You have no Friends yet</div>';}?>

    <div class="cl">&nbsp;</div>
</div></div>

this is script

  <script type="text/javascript">
  var page_num = 1; 
   $(function(){
$('#friend_display').scrollPagination({
    'contentPage': '<?=base_url()?>friends/load_more', // the url you are fetching the results
    'contentData': {page_num:$('.image-box').size()}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
    'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
    'beforeLoad': function(){ // before load function, you can display a preloader div
        $('#loading1').fadeIn();    
    },
    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
         $('#loading1').fadeOut();
         var i = 0;
         $(elementsLoaded).fadeInWithDelay();
         page_num:$('.image-box').size();
    }
});

// code for fade in element by element
$.fn.fadeInWithDelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).animate({opacity:1}, 200);
        delay += 100;
    });
};

 });
</script>

and this is my php function

  function load_more() 
{
    $offset =   $this->input->post('page_num');
    $list       =   $this->friends_model->show_friends($offset);
    if($list->num_rows()>0)
    {
        foreach($list->result() as $show)
        {?>

            <div class="image-box" style="margin-left:30px" id='image-holder'>
            <div class="photo-cover">
            <a href="<?=base_url()?>uploads/user_images/<?php echo $show->user_image;?>" class="big-image"><img width="160px" height="117px" src="<?=base_url()?>uploads/user_images/friends/<?php echo $show->user_image;?>" alt="" /></a>
            </div>

        <p class="photo-name"><b><?php echo $show->user_name;?></b></p>

    </div>
    <?php } ?>
    <div class="cl">&nbsp;</div>
    <?php
    } 
    else 
    {  
        //echo(333); 
    }
}

in db i jst shoing main query $this->db->limit(12,$offset); can someone tell me what i am missing?

Open this Link to wathch complete code.Scroll Pagination

Your question isn't detailed enough. Which loop fails, what're the results of it failing, and most importantly what have you tried? — Robin Castlin
– Robin Castlin, Commented Mar 13, 2013 at 15:06
the problem is that when i sroll down it display result and dont stop to display. supose in my db i have 50 result then i first use 10 result to display then when scrollpagination call goes it dispaly jst 10 and so on dispaly jst 10 first not other 40. and loop not ended if i scroll down it continuously display me jst 10 result — user2081972
– user2081972, Commented Mar 13, 2013 at 15:51
It sounds as if your offset value isn't managed correctly. Make sure the value is passed correctly by var_dumping and changing it till it works. — Robin Castlin
– Robin Castlin, Commented Mar 13, 2013 at 16:03
problem is offset value, in my js the page_num is not returning accurate result of offset — user2081972
– user2081972, Commented Mar 13, 2013 at 16:11
@Robin Castlin open link and see the full code to understand what i want to say i have updated question and added a link — user2081972
– user2081972, Commented Mar 14, 2013 at 6:45

darkless · Accepted Answer · 2013-03-13 21:19:36Z

2

+25

I belive that the way you are fetching offset isn't correct. (Thought I'm not sure because I don't know what is in your POST['page_num'])

$offset =   $this->input->post('page_num');

It looks like you fetch the page number, but the offset in limit function should be how much row has to be skipped. So if you are showing 12 results per "tick" offset should be 12*page_number

$this->db->limit(12,$offset*12);

If you leave offset to page number, you will get wrong results:

limit(12,[0,1,2,...]) // items 1-12, 2-13, 3-14 etc...

limit(12,[0,12,24....] //items 1-12, 13-24, 25-32 etc...

answered Mar 13, 2013 at 21:19

darkless

1,31412 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

darkless Over a year ago

try to do $this->db->limit(6,6*$offset); in your find function

Syed Ahmed · Accepted Answer · 2013-03-21 03:35:25Z

1

Here i solve this problem in my own way you can try this.In your script remove this line

'contentData': {page_num:$('.image-box').size()},

and add this line

 'childClass' : '.image-box',

After open scrollpagination.js file then replace this line data: opts.contentData, with this data: {page_num : $(obj).children(opts.childClass).size()},. Again replace 'contentData' : {}, this line with 'childClass' : '.datalist',.

In your function display_friends() please replace exit; function with this line echo '<input type="hidden" id="nodata" value="1" />'; . After that write your script look like this :

$(function(){

    $('#nomoreresult').hide();
    $('#loading1').hide();
    $('#friend_display').scrollPagination({

    'contentPage': 'Your_Url', // the url you are fetching the results
     // these are the variables you can pass to the request, for example: children().size() to know which page you are
    'childClass' : '.image-box',
    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
    'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
    'beforeLoad': function(){ // before load function, you can display a preloader div
        $('#loading1').show().fadeIn();
    },
    'afterLoad': function(elementsLoaded){
     // after loading content, you can use this function to animate your new elements
        $('#loading1').hide().fadeOut();
        $(elementsLoaded).fadeInWithDelay();

        if($('#nodata').val() == '1'){
            $('#friend_display').stopScrollPagination();
            $('#loading1').hide();
            $('#nomoreresult').show().fadeIn();

        }

    }
});

// code for fade in element by element
$.fn.fadeInWithDelay = function(){
    var delay = 0;
    return this.each(function(){
        $(this).delay(delay).animate({opacity:1}, 200);
        delay += 1000;
    });
};

edited Mar 21, 2013 at 3:35

answered Mar 20, 2013 at 11:31

Syed Ahmed

1,6452 gold badges16 silver badges23 bronze badges

5 Comments

user2081972 Over a year ago

Nice one solution, it solve 60%. but now problem is by changing scrollpagination.js is that if I scroll fast then it not gets correct page value and may get same value in next scroll down of i scroll fast and the 2nd one problem is that it is endless scroll down. it is not terminating after geeting no more result it should display my 2nd dive as i show in pastebin. and thanks again...

Syed Ahmed Over a year ago

hi @AyshaAli, i update my answer based on your this topic: "it is not terminating after geeting no more result it should display my 2nd div". I hope this will solve 2nd problem but in 1st problem about same content loading i will see. Thanks

Syed Ahmed Over a year ago

@AyshaAli i don't know why you get same result but in my test i don't get same result.

user2081972 Over a year ago

thanks for giving me ur precious time, but i can't understand that y i am getting sometimes duplicate value, the code is same as yours....then what is problem i dont understand

Syed Ahmed Over a year ago

let us continue this discussion in chat

Amir · Accepted Answer · 2013-03-19 19:32:28Z

0

Did you try jQuery.noConflict()?

  <script type="text/javascript">
  var page_num = 1; 
  jQuery.noConflict();
   $(function(){...

Edit2: It seems your offset works wrong. According to http://pastebin.com/MC1KZm8y

Find:

$offset =   $this->input->post('page_num');
$list       =   $this->friends_model->find($offset);

Replace:

$page_line = 6; //for example
$page_num = $this->input->post('page_num');
$offset   = ($page_num -1) * $page_line;
$list       =   $this->friends_model->find($offset);

edited Mar 19, 2013 at 19:32

answered Mar 18, 2013 at 12:49

Amir

4,1314 gold badges18 silver badges28 bronze badges

1 Comment

user2081972 Over a year ago

its not in controller problem i think its javascript problem or scrollpagination.js problem.

noelyahan · Accepted Answer · 2013-03-21 07:35:36Z

0

Add this missing code inside the afterLoad:function(){.. code also this should stop looping your pagination make sure to add exactly same id that you entered for the scrollpagination id <div id='friend_display'>

if ($('#friend_display').children().size() > 100){ //set the condition to where to stop
// if more than 100 results already loaded, then stop pagination (only for testing)
    $('#nomoreresults').fadeIn(); //if you want to show message like "No more result!" use this
    $('#friend_display').stopScrollPagination();// this is the most important function call
}

inside .scrollPagination({.. change 'contentPage': '<?php echo base_url();?>controller/action' inside this action(){ $this->load->view('that_you_want_to_display'); it means your display_friends() method only should contain the view file that want to load and parse and the data that you want to display and inside that view echo your data using the foreach

edited Mar 21, 2013 at 7:35

answered Mar 20, 2013 at 14:04

noelyahan

4,2751 gold badge34 silver badges28 bronze badges

3 Comments

user2081972 Over a year ago

no it does not mater by changing id, btw i tried this but not successed...thanks for ur ans..

noelyahan Over a year ago

@AyshaAli yes I checked your code again i found that you have missed the plugin code inside afterLoad': function(elementsLoaded){.. check my answer again

user2081972 Over a year ago

i was doing this same in scrollPagination.js but there was some if condition problem so it is not stoping loop but now fix this problem..thanks but the previous big problem is still remain that i m geting duplicate values.

Collectives™ on Stack Overflow

Codeigniter scrollpagination

4 Answers 4

1 Comment

5 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related