Uw betrouwbare partner voor (mobiele) web applicaties
TwitterEmailRSS

PhoneGap pull to refresh implementation

We all know the very nice pull to refresh functionality that was introduced in the Twitter app for iOS. Though patented by Twitter, it has been implemented in many apps since. I was working on a PhoneGap app with a page containing a list of news items and was wondering how difficult it would be to implement the pull to refresh functionality on that page. This blog describes how to make your PhoneGap pull to refresh implementation.

PhoneGap pull to refresh

Google led me to the iScrollView JQuery Mobile plugin to use the iScroll scroller. Using this plugin it was fairly easy to implement pull to refresh. A few steps had to be taken. First, include the plugin stylesheets and javascript files in your html file.

<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview-pull.css" type="text/css"/>
<script src="js/lib/iscroll.js"></script>
<script src="js/lib/jquery.mobile.iscrollview.js"></script>

Next, add the attribute data-iscroll to the container you want to add the functionality to. In my case, this was the content container of the page. See the first line in the code snippet below.

<div id="scroller" data-role="content" data-iscroll="">
 <div class="iscroll-pulldown">
   <span class="iscroll-pull-icon"></span>
   <span class="iscroll-pull-label"
         data-iscroll-loading-text="News is being refreshed"
         data-iscroll-pulled-text="Release to refresh the news">
     Refresh the news
   </span>
 </div>
 <div id="newsList"></div>
</div>

The <div> with class iscroll-pulldown contains the definition of the pulldown content that will be displayed when the user pulls down the container. Different data tags are available for the different states the pull down dialog can be in. data-iscroll-loading-text for the text to be displayed when the update action is executed and data-iscroll-pulled-text for the text to be displayed when the user has pulled down the container.

So, how do we implement the code to actually update the news items? We need some Javascript for that ofcourse! On the pageinit event of the page we need to bind javascript functions to the different events that have been defined by the plugin. See the code below how the javascript function onPullDown is defined for the iscroll-onpulldown event.

$('#newsPage').live("pageinit", function(event) {
  $(".iscroll-wrapper").bind( {
    iscroll_onpulldown : onPullDown
  });
});
function onPullDown(event, data) {
  //do your stuff here...
}

This is all that is needed to implement the pull to refresh functionality in your JQuery Mobile PhoneGap application. Enjoy!

13 thoughts on “PhoneGap pull to refresh implementation

  1. Hi Bas,
    Fijne tutorial maar werkt niet bij mij. Heb exact hetgeen gedaan wat jij beschrijft.
    Mis ik iets over het hoofd?

    • Hi Martijn,

      Ik heb zo onvoldoende context om je vraag te beantwoorden. Kun je anders je code hier posten? Dan kan ik er naar kijken.

      • tussen de

        $(document).ready(function() {

        $(‘#scroller’).live(“pageinit”, function(event) {
        $(“.iscroll-wrapper”).bind({
        iscroll_onpulldown : onPullDown
        });
        });

        function onPullDown(event, data) {

        alert(‘Hello world!’);

        }
        });

        in de body

        TITEL

        Sleep om te verversen…

        bij de onPullDown zou ik dan een ajax request willen doen. voor nu heb ik een alert om te kijken of het werkt.. maar hij blijft bij de pulldown alleen maar hangen op “bezig met laden…”

      • tussen de “head”

        $(document).ready(function() {

        $('#scroller').live("pageinit", function(event) {
        $(".iscroll-wrapper").bind({
        iscroll_onpulldown : onPullDown
        });
        });

        function onPullDown(event, data) {

        alert('Hello world!');

        }
        });

        in de body

        TITEL

        Sleep om te verversen...

        bij de onPullDown zou ik dan een ajax request willen doen. voor nu heb ik een alert om te kijken of het werkt.. maar hij blijft bij de pulldown alleen maar hangen op “bezig met laden…”

        • Hoi Martijn,

          Volgens mij is #scroller het id van de container in de page, maar niet het id van de page zelf. Probeer het eens met $(‘#myPageId’).live(“pageinit”, function(event) { enz….

          • bedoel je met “page” de div met data-role=”content” en data-iscroll=”” ?

          • Het gaat om de div met data-role=”page”. Deze div krijgt een pageinit event.

  2. Het werkt! Thanks!
    Alleen wat gebruik ik nu om die div te laten verversen zonder dat de header role en footer role mee verversen?

    • Dat kun je doen door in de onPullDown methode de inhoud van de div te verversen (in het voorbeeld de div met id=”newsList” )

  3. Hi Martijn,

    Thanks for your blog post, I’ve got it working!
    However, I was wondering if you know how to set it to the “pulled down state” initially
    (to show the user that it is updating the app when the app has been started).

    Thanks!
    Jeroen

  4. Hi Jeroen,

    I checked the documentation of the iScrollview widget for JQuery Mobile and I don’t think it provides the functionality you are looking for.

    You could try to file a feature request here and maybe they are willing to implement it.

    Good luck,
    Bas

  5. Hi –

    I am using the iscrolliew pull-to-refresh implementation – any idea what to do to stop the ajax loading gif? I pull down and it keeps loading 😉

    best Martin

    • Are you sure your onPullDown method finishes correctly. No timeout or so?

Comments are closed.