Infinite Scroll Mods?: PHPFusion 8 Support

Home
Search

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.

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

0 replies

You wanna use it in forum for posts?

0 replies

No its for something else. :)

0 replies

Tracked. :) This is interesting.

0 replies

News ticker? Just posting keywords that may help in your search.

0 replies

No, this is about creating a bottomless page. The page keeps loading more and more content when you reach the end of the page.

0 replies

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?

0 replies

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.

0 replies

Get started. I copy paste : http://www.sitepoint.com/jquery-infinite-scrolling-demos/

Code Download source


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

Code Download source


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

0 replies

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?

Edited by Craig on 01-09-2014 22:06, 10 y

0 replies

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

Code Download source

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.

Edited by JoiNNN on 02-09-2014 11:03, 10 y

0 replies

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

Code Download source

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

0 replies

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

Code Download source

if (html.length > 1) {
//There is content, do stuff
} else {
//There is no more content
$('#mycontainer').addClass('no-more-content');
}

Code Download source

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

0 replies

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

Code Download source

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.

0 replies

You got it a bit wrong Craig.

Try this

Code Download source

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

0 replies

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

0 replies

Have actually looked for Network requests or you just seeing the Loading text because of missing $('.flash').hide();?
Here

Code Download source

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

0 replies

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

0 replies

Sorry I don't know JS scroll event.

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

Code Download source


$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..

Code Download source


$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.

0 replies

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.

0 replies

Category Forum

Modifications and Requests - 8

Labels

None yet

Statistics

Views 0 views
Posts 21 posts
Votes 0 votes
Topic users 4 members

4 participants

Notifications

Track thread

You are not receiving notifications from this thread.

Infinite Scroll Mods?

21 posts

PHPFusion

Resources

Community

Development