Infinite scrollling with jquery-mobile

Question

I am using infinite scroll on my website, wanted to use the same for my mobile website, however, as soon as I include jquery-mobile, it stops working.

It works fine without that. Any pointers?

Details: I am using Paul Irish's infinite scroll. Initialization doesn't seem to give any error, but at the same time, it doesn't load the next page(doesn't make the ajax call when I reach the bottom of the page).

I have put up a bare bone site here

Answer 1

I know it is too late but late is always better than never.
You can use the following setInfifniteScroll() function to set up infinite scroll on your page. You can call this function or copy function code directly inside document ready function

$(document).ready(function(){
    setInfifniteScroll(scrollingDivId); // Here instead of scrollingDivId you can pass window object
});

Paulirish infinite scroll js has its some predefined algorithm to calculate next page url and if your url doesn't match to it then it will not call the next page. Therefore i have modified the url to call for next page.
Here you load you content for first page and then infinite scroll will work from second page. Note you have maintain one specific path for every page. example given below has ?page=pageNumber appended to my url.

function setInfifniteScroll(scrollingDivId){
    $('#scrollingDivId').infinitescroll({
        state: {
           currPage: 2 ,
           isDestroyed: false,
           isDone: false     
       },  
       loading: {
          finishedMsg: "<em>No more content to load. You have reached to end.</em>",
          img: "image/loader.gif",
          speed: 'fast',
          msgText: "<em>Loading the next set of content...</em>",
          delay  : 1
       },
       navSelector      : "#navId",
       nextSelector     : "#navId a",
       itemSelector     : ".itemselector", // it is element class to catch from your response
       debug            : false,
       dataType     : 'html',
       path: function(pageNumber) {
          var url = $("#navId a").attr("href");
          pageNumber = parseInt(url.substring(url.lastIndexOf("page=")+5, url.length)) + 1;
          $("#navId a").attr("href","nextPageUrl_append with?page=" + pageNumber);
          return url;
       },
    }, function(newElements, data, url){
       // You can perform operations on data
    });
}