CODEWITHSUNDEEP
javascriptjqueryinfinite
twiddly
twiddly

Reputation: 189

John Mueller infinite scroll

I'm trying to figure out infinite scroll with history and pagination, as recommended by google, https://googlewebmastercentral.blogspot.in/2014/02/infinite-scroll-search-friendly.html

John Mueller's demo does exactly what I want, but I can't figure out how/where the data is being loaded. http://scrollsample.appspot.com/items

I copied page source and js and css, but of course the source is for the particular "page" it happens to be on. Everything just points to the /items directory and the page isn't being reloaded on new data, just the content area refreshed, so I don't get it.

Probably just being a noob, but any insight appreciated.

Upvotes: 0

Views: 2417

Answers (4)

John Hascall
John Hascall

Reputation: 9416

If you "View Source" you will see that they reference a file of JavaScript

In this file are the functions which implement the pagination. For example, in the loadFollowing() function you will see a call to $.getJSON() which fetches JSON data via AJAX. It then calls a function showFollowing() which adds the content (which came in the JSON data) to the page with: $('div.listitempage:last').after(data.response);

Upvotes: 1

trenthaynes
trenthaynes

Reputation: 1678

The sample page makes use of a service available at http://scrollsample.appspot.com using the complete URL http://scrollsample.appspot.com/items?page=2&type=json to get the specific data paginated in a return type of JSON.

You can past that url in a browser and see the raw data that is returned from the service.

The fact that the webpage is also hosted at the same base url is immaterial. Once you add the parameters in question, you no longer get the HTML "website". Instead you get a formatted data response (in this case JSON).

Upvotes: 1

Gavriel
Gavriel

Reputation: 19237

I see this in their code:

$.getJSON(next_data_url, function(data) {
    showFollowing(data);
    is_loading = 0;
});

Upvotes: 0

Luan Soares
Luan Soares

Reputation: 310

The data is being loaded from 'http://scrollsample.appspot.com/items?page=2&type=json' when you start the page, then the function primeCache() is called and populate 'next_data_cache' var.

When you scrool the page, other function is called, this time is 'showFollowing()' who get the data doing a getJSON and passing data again to 'next_data_cache' var.

Upvotes: 0

Related Questions