Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Infinite Scroll Mods?

Hey,

Is there any addons that use any scripts to make data Infinite Scroll using jquery or ajax?

I need to figure out how to make some kind of infinite scroll or Load More for data. Need to see how it's done. I think maybe there was a forum panel that used to do it to show more threads yes?

Say it shows 20 posts then when scroll down it will show another 20, scroll again another 20 and so on, kind of like facebook.

Thanks
You wanna use it in forum for posts?
No its for something else. :)
Tracked. :) This is interesting.
News ticker? Just posting keywords that may help in your search.
No, this is about creating a bottomless page. The page keeps loading more and more content when you reach the end of the page.
Is this one of them games where the thread author asks a question and the helpers then answer his question with a question?
Why such intrigue? The question in post #1 is clear as day. Does it matter to you to know exactly what it is for in order to help me? Nah did not think so hehe!! :o

Any ideas then?
Since it seems you are only interested in the actual javascript and not both JS and PHP(which is pretty much unique to every situation and you'd probably need more insight on this rather than the JS), here you go.
Get started. I copy paste : http://www.sitepoint.com/jquery-infinite-scrolling-demos/

CodeDownload  

<div id="postswrapper">
   <div class="item">content</div>
   ...
   <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>
</div>



CodeDownload  

<script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loadmore.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});
</script>

K very nice got it working but.. it would be good if it did not keep loading them in a loop.

Quote


The demo never reaches the end of content but if you included either a) logic in your backend script to return nothing when content finishes or; b) a loop for loading to reach the end, then you could achieve this quite easily.


how?
When you reach the end of the returned content from PHP code output nothing "" then if nothing is reported as an error you are done if not in JS try if (html.length > 1) { //There is content, do stuff }
Oh also did you figured out how to keep track of the last ID requested so you don't request data beginning from the same position every time resulting in duplicate content?
A hint, assign the id from DB to each row resulted then
CodeDownload  
var last_id = $('#mycontainer').last('.row').attr('id');
...
url: "loadmore.php?startID=" + last_id,
...


Then make us of $_GET['startID'] in your DB query limit.
This is the script I have now. It uses pagelimit to show them 10 posts each then click more but when it gets to the end there is no data but it kaape trying to load it giving me multiple empty divs. lol


CodeDownload  
function loadData(pageLimit){
     $('.flash').show();
     $('.flash').fadeIn(100).html
            ('Loading');
     var dataString = 'pageLimit='+ pageLimit;
     $.ajax({
             type: 'POST',
              url: '".BASEDIR."infusions/aya_aye_panel/includes/load-aye-votes.php',
            data: dataString,
            cache: false,
            success: function(result){
            $('.flash').hide();
            $('.load_more_link').addClass('noneLink');
            $('#pageData').append(result);
      }
  });
}
  loadData('0');

You should limit the number of results/rows returned in PHP rather than JS, imagine you have a very high number of data in your DB, thousands, one could query that over and over overloading your DB or even crashing.

Quote

This is the script I have now. It uses pagelimit to show them 10 posts each then click more but when it gets to the end there is no data but it kaape trying to load it giving me multiple empty divs. lol

Check the length, see previous post. When there are no more result to avoid re-requesting you can add a class to the main container like "no-more-data" then before doing the ajax query check if is there
CodeDownload  
if (html.length > 1) {
//There is content, do stuff
} else {
//There is no more content
$('#mycontainer').addClass('no-more-content');
}


CodeDownload  
if (!$('#mycontainer').hasClass('no-more-content')) { //Continue, more content can pulled }

Then my content does not load with that like so....

CodeDownload  
function loadData(pageLimit){
if (html.length > 1) {
     $('.flash').show();
     $('.flash').fadeIn(100).html
            ('Loading');
     var dataString = 'pageLimit='+ pageLimit;
     $.ajax({
             type: 'POST',
              url: '".BASEDIR."infusions/aye_panel/includes/load-more.php',
            data: dataString,
            cache: false,
            success: function(result){
            $('.flash').hide();
            $('.load_more_link').addClass('noneLink');
            $('#pageData').append(result);
      }
  });

} else {
//There is no more content
$('#pageData').addClass('no-more-content');
}
}
  loadData('0');



Does not load outside the loadData function either.
You got it a bit wrong Craig.

Try this
CodeDownload  
function loadData(pageLimit) {
   if (!$('#pageData').hasClass('no-more-content')) {
      $('.flash').show();
      $('.flash').fadeIn(100).html('Loading');

      var dataString = 'pageLimit='+ pageLimit;
      $.ajax({
            type: 'POST',
            url: '".BASEDIR."infusions/aye_panel/includes/load-more.php',
            data: dataString,
            cache: false,
            success: function(html) {
               if (html) { // try html.length > 1 if it doesn't work as expected
                  $('.flash').hide();
                  $('.load_more_link').addClass('noneLink');
                  $('#pageData').append(html);
               } else {
                  $('#pageData').addClass('no-more-content');
               }
            }
      });
   }
}

Nah unfortunately that wont do it either it will still continue to try and load more even when there is no more to show. lol
Have actually looked for Network requests or you just seeing the Loading text because of missing $('.flash').hide();?
Here
CodeDownload  
    function loadData(pageLimit) {
       if (!$('#pageData').hasClass('no-more-content')) {
          $('.flash').show();
          $('.flash').fadeIn(100).html('Loading');

          var dataString = 'pageLimit='+ pageLimit;
          $.ajax({
                type: 'POST',
                url: '".BASEDIR."infusions/aye_panel/includes/load-more.php',
                data: dataString,
                cache: false,
                success: function(html) {
                   if (html) { // try html.length > 1 if it doesn't work as expected
                      $('.flash').hide();
                      $('.load_more_link').addClass('noneLink');
                      $('#pageData').append(html);
                   } else {
                      $('.flash').hide();
                      $('#pageData').addClass('no-more-content');
                   }
                }
          });
       }
    }

No it will still load empty divs when we click the button it should hide that button at the end rite.


http://awesomescreenshot.com/01d3ex025f
Sorry I don't know JS scroll event.

But this is how i will tackle it if it is a button post load more.

CodeDownload  

$items_per_page = 25;
$result = dbquery("SELECT ..... LIMIT 0,$items_per_page");
if (dbrows($result)>0) {...... while ..... }

echo "<div id='Craig'></div>\n";
echo "<form>\n";
echo "<button id='Hien' value='25'>Load More</button>\n";
echo "</form>\n";
[code]

[code]
$('#Hien').bind('click', function() {
var RowStart = $(this).val(); // <---- we need this to send to Ajax File
          $.ajax({
                type: 'POST',
                url: '".BASEDIR."infusions/aye_panel/includes/load-more.php',
                data: { 'rowstart' : RowStart },
                cache: false,
                success: function(html) {
                   if (html) {
                      next_value = RowStart+".$items_per_page.";
                      $('#Hien').val(next_value); // there - it will become 50.. when you click, you send 50 to Ajax... and 75.. and so on.
                      $('#Craig').append(html);
                   } else {
         
                      $('#pageData').addClass('no-more-content');
                   }
                }
          });
});



Your Ajax file..

CodeDownload  

$items_per_page = 25;
$result = dbquery("........... LIMIT $_POST['rowstart'], $items_per_page");
if (dbrows($result)>0) {.... loop result out } else { echo "No more content. Aye!"; }



Now is var PageLimit == $_POST['rowstart'] ?? I'm not familiar with the scroll thing. You need a rowstart just like our JS.
I did this when I did the pagenav Js for 8.
We can go forever with posting codes until you figure it out, better post your files. Too lazy to write a test case from scratch.
Thread Information
Author
Replies
22 posts
Views
2,901 times
Last Post
Last updated on 6 years ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Homdax, Craig, Chan, JoiNNN