3

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...

John Brunner
  • 2,842
  • 11
  • 44
  • 85
  • Take a look here: http://stackoverflow.com/questions/7879417/how-to-capture-scroll-start-event-on-iphone-android – Irvin Dominin Jun 07 '13 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 Jun 07 '13 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 Jun 07 '13 at 12:12

3 Answers3

2

Here's an working example : http://jsfiddle.net/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.net/Gajotres/Bn2Du/. It uses pure jQuery, no need for additional frameworks. I have tested it on iPad and Android devices.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • thanks for your answer, but i don't want to use plugins, so i've done the "load-more"-thing now with a plain and simple "load-more"-button :) didn't know that the procedure is _that_ complicated on a mobile phone – John Brunner Jun 11 '13 at 12:17
1

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 combine 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");
});
CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
  • thanks, but it doesn't work. without the `if window scrollTop()` math inside the brackets the code works, but in a wrong way (it fires everytime a scroll stops). – John Brunner Jun 07 '13 at 12:18
  • See updated answer. You can combine the three events of, scrollstart - start monitoring for changes, touchmove - check the scroll position when the user moves their finger, scrollend - unbind from the scrollstart event – CodingIntrigue Jun 07 '13 at 12:22
  • do you mean `.bind("scrollstop", function()` instead of `scrollend`? i've changed that but this code gives me an "Uncaught SyntaxError: Unexpected token }" error in my console... – John Brunner Jun 07 '13 at 12:38
  • hm thanks for your answer, but it don't works. i've done the "load-more"-thing now with a plain and simple "load-more"-button :) didn't know that the procedure is that complicated on a mobile phone :) – John Brunner Jun 11 '13 at 12:18
1

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.

Daniela
  • 139
  • 1
  • 3
  • 11