CODEWITHSUNDEEP
phpjquerymysql
Frank
Frank

Reputation: 634

Infinite scrolling MySQL PHP jQuery

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.

Upvotes: 1

Views: 1118

Answers (2)

Max Bumaye
Max Bumaye

Reputation: 1009

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

Upvotes: 1

Rajesh
Rajesh

Reputation: 139

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

Upvotes: 0

Related Questions