Question

I’m using a script called autobrowse It represents an infinite scroll type of script which pulls the data from a JSON file. When I set the script to repeat(loop) the items a few times it works perfectly like in the demo example from the creator of the script. That is done by entering a higher value in max, like they have it set to 100 in their example which pulls data from a flickr json feed.

But I don’t want to repeat my results, instead I want them to load like every 10 or 20 items and stop when the last item from the json(database) is loaded. But when I set the “max: 1” option in the script in order to load my items from the JSON only once, it displays all the elements at once, no matter how many they are. No infinite scrolling whatsoever.

So I want to set how many items should be displayed with every scroll at the bottom of the page. Like 10 for example.

This is how I generate my JSON file:

<?php
$link = mysql_pconnect("localhost", "user", "pass") or die("Could not connect");
mysql_select_db("dbase") or die("Could not select database");

$arr = array();

$rs = mysql_query("SELECT * FROM bannersright ORDER BY HdOrder");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"bannersright":'.json_encode($arr).'}';

?>

And this is how I call the autobrowse script in my view file:

   $(function () {

        $("#wrapper #sidebar-right").autobrowse(

            {

                url: function (offset)
                {                   
                    return "http://www.mysite.com/json.php";
                },
                template: function (response)
                {
                    var markup='';
                    for (var i=0; i<response.bannersleft.length; i++)
                    {
                        markup+='<a href="'+response.bannersleft[i].URL+'"><img src="'+response.bannersleft[i].Image+'" /></a>'
                    };
                    return markup;
                },
                itemsReturned: function (response) { return response.bannersleft.length; },
                offset: 0,
                max: 1,
                loader: '<div class="loader"></div>',
                useCache: false,
                expiration: 1
            }
        );

});

I believe that it has something to do with the offset function, but not sure how to accomplish this. They have one more demo with twitter on their website, which is pretty similar with this, but they call the json like this:

url: function (offset)
{
    return "http://twitter.com/status/user_timeline/ParisHilton.json?count=10&page=OFFSET&callback=?".replace(/OFFSET/, 1+Math.round(offset/10));
},

(the reason their demo doesn’t work any more is because twitter changed their json feeds api)

From the way they call the twitter feed, I suppose twitter had the option to set pages in their API.

So I guess my final question would be: how do you create pages in JSON ? What php code do I need to add to my json.php file in order to be able to pickup the elements from it in pages?

It doesn’t have to be with json pages, if you have another solution please kindly share it.

Answer 1

You forget to set LIMIT in mySQL request and in url generator:

PHP

<?php
$link = mysql_pconnect("localhost", "user", "pass") or die("Could not connect");
mysql_select_db("dbase") or die("Could not select database");

//GET page/count
$count=10;$offset=0;
if (isset($_GET['count'])) $count=$_GET['count']*1;
if (isset($_GET['page']))  $offset=$_GET['page']*$count*1;

$arr = array();

$rs = mysql_query("SELECT * FROM bannersright 
                   ORDER BY HdOrder 
                   LIMIT $offset,$count"); #<-HERE

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"bannersright":'.json_encode($arr).'}';

?>

JS:

$(function () {

        $("#wrapper #sidebar-right").autobrowse(

            {

                url: function (offset)
                {                   
                    return "http://www.mysite.com/json.php?count=10&page="
                           +Math.round(offset/10); // <-- AND HERE
                },
                template: function (response)
                {
                    var markup='';
                    for (var i=0; i<response.bannersleft.length; i++)
                    {
                        markup+='<a href="'+response.bannersleft[i].URL+'"><img src="'+response.bannersleft[i].Image+'" /></a>'
                    };
                    return markup;
                },
                itemsReturned: function (response) { return response.bannersleft.length; },
                offset: 0,
                max: 1,
                loader: '<div class="loader"></div>',
                useCache: false,
                expiration: 1
            }
        );

});