javascript - How to automatically "load more" at the end of a mobile page - Stack Overflow

admin管理员组

文章数量:1401384

How could I fire an ajax request automatically at the end of a mobile page (with jquery and jquery mobile)? The code

$(document).bind('pageshow #item_search', function(){
        $('#content_table').scroll(function() {
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               //ajax
               alert("end of page");
           }
        });
});

works great on a desktop PC, but does nothing on my phone...

How could I fire an ajax request automatically at the end of a mobile page (with jquery and jquery mobile)? The code

$(document).bind('pageshow #item_search', function(){
        $('#content_table').scroll(function() {
           if($(window).scrollTop() + $(window).height() == $(document).height()) {
               //ajax
               alert("end of page");
           }
        });
});

works great on a desktop PC, but does nothing on my phone...

• javascript
• jquery
• ajax
• jquery-mobile
• web-applications

Share Improve this question Follow asked Jun 7, 2013 at 12:02 John BrunnerJohn Brunner 2,8721111 gold badges4646 silver badges8989 bronze badges 3

• Take a look here: stackoverflow./questions/7879417/… – Irvin Dominin Commented Jun 7, 2013 at 12:06
• thanks, but that is not the same because the code in the answer fires everytime the user scrolls, even if he is miles away from the bottom of the page... – John Brunner Commented Jun 7, 2013 at 12:10
• Are the right events but you must check if you are at the bottom, like what you do in the scroll event – Irvin Dominin Commented Jun 7, 2013 at 12:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here's an working example : http://jsfiddle/Gajotres/v4NxB/.

I made it as proof of concept so it is far from perfect demo but it can give you enough info to use it correctly.

It uses this jQuery plugin called Waypoints to detect bottom scroll touch

I have built it with jQM 1.0 so I can't tell you if it is going to work with jQuery Mobile 1.3.1.

This will detect bottom end:

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

There also another solution I used to use but it is not mine. It was originally used in some previous Jasper answer.

This version works with every jQM version, including 1.3 : http://jsfiddle/Gajotres/Bn2Du/. It uses pure jQuery, no need for additional frameworks. I have tested it on iPad and Android devices.

The jQuery Mobile docs for events suggest to use scrollstart & scrollstop. Try:

$('#content_table').bind("scrollstop", function() {
         if($(window).scrollTop() + $(window).height() == $(document).height()) {
         alert("end of page");
     }
});

Or you could bine scrollstart/scrollstop with touchmove to try and get real-time events:

$('#content_table').bind("scrollstart", function() {
     $(this).bind("touchmove", function() {
         if($(window).scrollTop() + $(window).height() == $(document).height()) {
             alert("end of page");
         }
     }
}).bind("scrollend", function() {
     $(this).unbind("touchmove");
});

if you use JQM: It was a long time to find a way to find good code, to recognize bottom of the page, and to load more content.

Finally i used this:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
    NameFunctionWhatCallsAjax();
   }
});

And I put this in my header:

<meta name="viewport" content="width=device-width, initial-scale=1">

It works on Iphone and other mobile devices too. in NameFunctionWhatCallsAjax(); function you call make for example ajax call for new rows. I hope it will work for you too.

And in ajax success put for example:

              success: function(response){
        $('#loading').remove();
            $('.infinite-container').append(response);
        $('.infinite-container').append("<li id='loading'>Lo9ading new rows..</li>");
            $('.infinite-container').listview('refresh');
          }

You need to refresh to have the same visual look like jquery mobile have because of jquery mobile themes.

本文标签： javascriptHow to automatically quotload morequot at the end of a mobile pageStack Overflow