Loading:

Książka Zend Framework 3. Poradnik Programisty.

Dynamicznie doładowywana lista List View z AJAX'em - jQuery Mobile

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.



Napisz Artykuł

Listing

$(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)');
        });
   }
});


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=12942

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 37169
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors