CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Manatok
Manatok

Reputation: 5706

jQuery Mobile lazy load list items

How do you know that you are at the bottom of a list in jQuery Mobile, I need to lazy load in more results when the end of the list is reached?

Upvotes: 3

Views: 13829

Answers (3)

Robin C Samuel
Robin C Samuel

Reputation: 1225

Simple code to load more items on reaching page bottom.

 if ($(window).scrollTop() > $('#page1').height() - 500) {
        eventsElement.append('<li><a href="">Stop</a></li>');
        eventsElement.listview('refresh');
 }

For full example,

see Code here.

Using jquery-mobile-iscrollview will be better. It provides pull down and pull up events

Git hub link

Upvotes: 3

Samih A
Samih A

Reputation: 419

there is a jq mobile plugin names lazyloader that would help .

link :http://dcarrith.github.com/jquery.mobile.lazyloader

Upvotes: 0

shanabus
shanabus

Reputation: 13115

There is a working example of using scrollstart and scrollstop events here, that should get you going in the right direction: http://jsfiddle.net/shanabus/LJTJt/

Documentation page here: http://jquerymobile.com/test/docs/api/events.html

Hope this helps!

UPDATE

With help from this post, I was able to wire up a better example that does detection against the bottom of the page. If your list view is not in the bottom of the page, this will not work as well. Check the console for some position debug information.

http://jsfiddle.net/shanabus/LJTJt/1/

Here it only adds a new item when you reach the bottom of the list.

Upvotes: 8

Related Questions