Page pagination in JqueryMobile

Goal:

  Infinite number of different, similar, pages like Tinder app, where each page contains images,labels and text.

One ajax request to the server contains the data for the next 10 pages, so we won`t do the "simple" solution of reading a new ajax page each time.

Solution:

We will have 3 pages  (match1, match2, match3) each one as a "next" button pointing to the next one.

We will save the data of the next 10 pages at any given point, let`s call it the model.

On each page pagebeforeshow event, we will change the data on the non visible page.

Once the model data is empty (all the 10 pages were seen), we will use an ajax call to fill the model.

model state= 50,51,52,53,...,59

[page1] [page2] [page3]

on the first time (when all pages are empty) and later, when one page becomes obsolete, we will fill the obsolete pages

  50            51         52

[page1] [page2] [page3]

  active

  53            51         52

[page1] [page2] [page3]

               active

...

 59            57         58

[page1] [page2] [page3]

              active   

when we get to this state, once 58 becomes active, we will want to replace page2 with 60, so we will do an ajax call and update the model with it,
delicate points:  

• If ajax call is on it`s way, there is no reason to make a new call.
• We should also clean the previous page to null data (default image and text), in case the user will be faster than our ajax call. We may even consider creating a "loading" progress bar, if the ajax is very slow.