Infinite scrolling MySQL PHP jQuery

Question

the code below shows an infinite scrolling function with jQuery and php. I have two problems that I can't seem to figure out...

My first problem: I know, it's called "infinite" scrolling. But ridiculously enough, the content that is loaded when scrolling down to the bottom of the page is actually "infinite" (repeating itself, when I actually do not want any duplicates). I believe that has something to do with the if-statements in the jQuery-function.

Here's the jQuery part:

jQuery.fn.portfolio_addon = function(addon_options) {
"use strict";
//Set Variables
var addon_el = jQuery(this),
    addon_base = this,
    img_count = addon_options.items.length,
    img_per_load = addon_options.load_count,
    $newEls = '',
    loaded_object = '',
    $container = jQuery('.image-grid');

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {


    $newEls = '';
    loaded_object = '';                                    
    var loaded_images = $container.find('.added').size();
    if ((img_count - loaded_images) > img_per_load) {
        var now_load = img_per_load;
    } else {
        var now_load = img_count - loaded_images;
    }

    if ((loaded_images + now_load) == img_count) jQuery(this).fadeOut();

    if (loaded_images < 1) {
        var i_start = 1;
    } else {
        var i_start = loaded_images+1;
    }

    if (now_load > 0) {         
        // load more elements
        for (var i = i_start-1; i < i_start+now_load-1; i++) {
            loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +' " class="blogpost_preview_fw element '+ addon_options.items[i].category +'"><div class="fw_preview_wrapper"><div class="gallery_item_wrapper"><a href="'+ addon_options.items[i].url +'" ><img src="'+ addon_options.items[i].src +'" alt="" class="fw_featured_image" width="540"><div class="gallery_fadder"></div><span class="third_party_'+addon_options.items[i].thirdparty +'"></span><span class="third_party_mobile_'+addon_options.items[i].thirdparty_mobile +'"></span><span class="description_tag"><span class="actual_description">'+ addon_options.items[i].title +'</span></span> <span class="price_tag"><span class="actual_price">€ '+ addon_options.items[i].price +'</a></div><a href="'+ addon_options.items[i].url +'"><div class="grid-port-cont"><h6>'+ addon_options.items[i].title +'</h6><hr class="trennlinie"><span>'+ addon_options.items[i].description +'</span><hr class="trennlinie"><span>Preis: EUR '+ addon_options.items[i].price +'</span>&nbsp;·&nbsp;<span>Ort: '+ addon_options.items[i].postcode +' '+ addon_options.items[i].city +'</span></div></a></div></div></div></div>';
        }

        $newEls = jQuery(loaded_object);
        $container.isotope('insert', $newEls, function() {
            $container.isotope('reLayout');                             
        });         
    }}
});
}

And this is a part of my php:

<?php // load more on default
if($condition == true){


//connect to the database
//-select the database to use

$start1 = 40; // it starts at 40 because 40 items load when page loads
$limit1 = 20;

//-query the database table
$sql="SELECT * FROM table WHERE City LIKE '%".$featured."%' order by id limit $start1,$limit1";

//-run the query against the mysql query function
//-create while loop and loop through result set 
//-assign &numrows variable

?>
<script>
items_set = [
    {src : '<?php echo $row['imageURL']; ?>', 
        url : '<?php echo $row['URL']; ?>', 
        category: '<?php echo $row['DetailCategory']; ?>',
        title : '<?php echo $row['Name']; ?>',
        description : '<?php echo $row['Description']; ?>', 
        price : '<?php echo $row['Price']; ?>',
        postcode : '<?php echo $row['Postcode']; ?>', 
         city : '<?php echo $row['City']; ?>',
        thirdparty : '<?php echo $row['ThirdParty']; ?>',
        thirdparty_mobile : '<?php echo $row['Thirdparty']; ?>'}         
];
jQuery('#list').portfolio_addon({
    load_count : <?php echo $numrows;?>,
    items : items_set
}); 
</script>

<?php
}}
?>

Here's my second problem: I have exactly 49 items (rows) in my database. As the code shows, 40 of them are already displayed when the page loads. Now when I scroll down the page (trigger loading-function) only 6 new items show up, while 9 should (all 49 should be called with the query I am using). Somehow it even seems like the mysql-query does not even have any effect at all.

I would really appreciate some help! Thanks.

you're directly dumping data from PHP into a JS context. You're at MASSIVE risk of introducing JS syntax errors and killing your entire JS code block. NEVER dump directly. Always output via json_encode() so you produce syntactically correct JS at all times. — Marc B
– Marc B, Commented Nov 13, 2014 at 15:28
It's also infinitely repeating because you don't change your $start/$limit in between fetch calls. You're just fetching/displaying the SAME records each time. your scroller MUST send over a "fetch pages 40-49", "fetch pages 50-59", "fetch pages 60-69" etc... each time — Marc B
– Marc B, Commented Nov 13, 2014 at 15:29
@MarcB this looks like a "first draft" anyway... so he is probably building a prototype of something to see how to get it working ;) — Max Bumaye
– Max Bumaye, Commented Nov 13, 2014 at 15:30
@MarcB: thanks! It's definitely only a prototype, nothing finished here, but you're right! I'm just trying to find out how to fetch only the pages 40-49, so that after these have loaded, no more new content appears when scrolling to the bottom... — Frank
– Frank, Commented Nov 13, 2014 at 15:43

Max Bumaye · Accepted Answer · 2014-11-13 15:35:10Z

1

i hope I am getting this right:

the same content is being loaded over and over again.

I think this issue is due to:

loaded_object = loaded_object + 'lots of more content';

in your loop. Your loaded object attaches itself infront of the new content every time and is then attached to the dom

You only want your:

loaded_object = 'lots of more content';

to be loaded.. the old stuff is in your DOM allready and doesnt need to be part of the "loaded_object"

EDIT: As MarcB hast commented below your question: your select statement is also fetching the same DATA over and over again

edited Nov 13, 2014 at 15:35

answered Nov 13, 2014 at 15:27

Max Bumaye

1,00710 silver badges18 bronze badges

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

2 Comments

Frank Over a year ago

thanks! Removing only the ´loaded_object´ doesn't do it, you're right (@MarcB). If I only wanted to load those 9 items once, without any further pages, could you give me an idea of how it would be supposed to look? Thanks a lot!

Max Bumaye Over a year ago

Maybe try to rethink your client&server strategy... just like Rajesh mentioned in his post it might be usefull to go with some ajax requests. You should think about making an RESTful service that your client then talks to

Rajesh · Accepted Answer · 2014-11-13 15:34:37Z

0

I think, there is no ajax request. You need to send an ajax request with offset of how many post is done and how many post need to fetch.

Please give your comment

answered Nov 13, 2014 at 15:34

Rajesh

1396 bronze badges

2 Comments

Max Bumaye Over a year ago

Maybe he is requesting the index.php with ?featured='something'... loading the images and displaying a maximum of 20 on every page load. In that case he would not need any ajax

Frank Over a year ago

could you maybe show me how this ajax request would have to look? thanks!

Collectives™ on Stack Overflow

Infinite scrolling MySQL PHP jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related