Skrypt pokazuje jak stworzyć dynamiczną listę AJAX, która będzie dodawać do siebie elementy na zasadzie inifity scroller czyli nieskończonego scrollowania.

 

Oznacza to, że podczas scrollowania do dołu elementy same będą się dopełniać, coś na zasadzie inteligętnego wczytywania stron na Facebooku.

 

UWAGA!

Przykład korzysta z biblioteki jQuery mobile.

$(window).bind('scrollstop', function () {
   //pobranie list view oraz aktualną pozycję scrolla
   var listContainer = $('.hpListView'),
       scrollPosition = listContainer.height() - $(document).scrollTop(),
       out = '';
   
   //sprawdzmy czy aktualnie nie pobierane już są jakies wyniki oraz kiedy pozycja scrolla jest większa niż 600px (może być inna na różnych urządzeniach), dodatkowo sprawdzamy czy posiadamy więcej wyników z AJAXu
   if(!loading && scrollPosition < 600 && haveMoreResults) {
           //wyświetlenie loading'u
           $.mobile.loading( 'show', {
                theme: 'a'
           });
           loading = true;
           offset++;
           if(region == null) {
               region = '';
           }
           //wywołanie AJAXu
           $.ajax({
                url: "http://hostparty.pl/api/get/hosts/region/"+region+"/offset/"+offset
           }).done(function(data) {
                //ukrywamy loader
                $.mobile.loading('hide');
                loading = false;
                var results = $.parseJSON(data);
                if(results.length == 0) {
                     //brak wyników, ustawiamy flagę aby zcachować wyniki
                     haveMoreResults = false;
                } else {
                     for(var i=0; i < results.length; i++) {
                          out += '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-thumb ui-focus ui-btn-up-c">Funkcje.net</li>';
                     }
                     //dodajemy elementy do listy i odświerzamy ją
                     listContainer.append(out);
                     listContainer.listview('refresh');
                }
        }).fail(function() {
            alert('Błąd przy próbie połączenia z serwerem. (103)');
        });
   }
});