Framework7: Pull-to-refresh does not work programmatically

Created on 29 Oct 2016  路  13Comments  路  Source: framework7io/framework7

This is a bug.

  • Framework7 Version: february 2016
  • Platform and Target: chrome on linux.

When adding the pull-to-refresh programmatically, neither the arrow down nor the spinner shows.
Actually, you can reproduce the same by just pasting in the pull-to-refresh-html in developer modus in chrome instead of doing it by code. The sample below doesn't format properly, but I hope you understand.
html:

<body>
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>  
    <div class="panel-overlay"></div>  
    <!-- Views -->  
    <div class="views">  
        <div class="view view-main">  
            <div class="pages">  
                <div id='home' data-page="home" class="page navbar-fixed toolbar-fixed">  
                </div>  
            </div>  
        </div>  
    </div>  
    <script type="text/javascript" src="main.js"></script>  
</body>

js:

var myApp = new Framework7();

var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});

var win = require('window');
win.$$ = Dom7;
win.app = myApp;

var region = document.getElementById('home');
var cont =    '<div class="navbar">  
                  <div class="navbar-inner">  
                      <div class="left"></div>  
                      <div class="center">Climbing gyms</div>  
                      <div class="right"></div>  
                  </div>  
                </div>  
                <div data-name="pullToRefreshGyms" id="pullToRefreshGyms" class="page-content pull-to-refresh-content" data-ptr-distance="55">  
                     <div class="pull-to-refresh-layer">    
                         <div class="preloader"></div>  
                         <div class="pull-to-refresh-arrow"></div>  
                     </div>  
                </div>';
win.$$('#home').html(cont);
outdated
Source
picture lroal

Most helpful comment

Success !
Thank you.

picture lroal on 31 Oct 2016
🎉2

All 13 comments

The html I am inserting dynamically in the home element is this:

<div class="navbar">
    <div class="navbar-inner">
        <div class="left"></div>
        <div class="center">Climbing gyms</div>
        <div class="right"></div>
    </div>
</div>
<div data-name="pullToRefreshGyms" id="pullToRefreshGyms" class="page-content pull-to-refresh-content" data-ptr-distance="55">
    <div class="pull-to-refresh-layer">
        <div class="preloader"></div>
        <div class="pull-to-refresh-arrow"></div>
    </div>
</div>
lroal picture lroal on 29 Oct 2016

Maybe you can format your code(using ``instead of), and others can clearly see the question

2857 picture 2857 on 31 Oct 2016 
      <div className="views">
        <div className="view view-main">
         <div className="page">
           <div className="page-content pull-to-refresh-content" data-ptr-distance="85">

             <div className="pull-to-refresh-layer">
               <div className="preloader"></div>
               <div className="pull-to-refresh-arrow"></div>
             </div>

             <div className="list-block">
               <ul>
                 <li className="item-content">
                   <div className="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44" /></div>
                   <div className="item-inner">
                     <div className="item-title-row">
                       <div className="item-title">Yellow Submarine</div>
                     </div>
                     <div className="item-subtitle">Beatles</div>
                   </div>
                 </li>
               </ul>
             </div>
           </div>
         </div>
        </div>
      </div>

The html structure is important in F7!!!! If there was any wrong with the code ,plz checked the structure of the html from the official demo

This html structure is work, and we can put the list content into ul
Finally, dont forget to initialize the js and add listener into the dom 

    let $$ = Dom7;

    let myApp = new Framework7();

    let ptrContent = $$('.pull-to-refresh-content');

    // Add 'refresh' listener on it
    ptrContent.on('refresh', function (e) {
        // Emulate 2s loading
        setTimeout(function () {
            myApp.pullToRefreshDone(); // After we refreshed page content, we need to reset pull to refresh component to let user pull it again:
        }, 2000);
    });
2857 picture 2857 on 31 Oct 2016

I have formatted it properly now.
I left out the listening on the refresh event in this sample for convenience.

lroal picture lroal on 31 Oct 2016

you can't create it dynamically! the various listeners wont get added!

ZanderBrown picture ZanderBrown on 31 Oct 2016

Well, that is major problem. Shouldn't a framework like this support adding html at runtime ?
Is there any workarounds for this ?

lroal picture lroal on 31 Oct 2016

it's actually quite tricky to do. maybe explain why you want to do it?

ZanderBrown picture ZanderBrown on 31 Oct 2016

I have a recursive list of items. Inside an item there could be more items. I do not know in advance how deep it will be. I depends on the data received from the server.

lroal picture lroal on 31 Oct 2016

Just checked the docs and i suggest you try

myApp.initPullToRefresh("#pullToRefreshGyms");
ZanderBrown picture ZanderBrown on 31 Oct 2016

Success !
Thank you.

lroal picture lroal on 31 Oct 2016
🎉2

I had the same issue. The official doc example mentions the sample code as

// Add 'refresh' listener on it
ptrContent.on('ptr:refresh', function (e) {

It should be
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {

vishnoor picture vishnoor on 29 Nov 2017
👍1

@vishnoor Is right, it should be 'refresh' instead of 'ptr:refresh'. The docs should be changed to reflect this. Thanks vishnoor.

Vacster picture Vacster on 24 Dec 2017

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

lock[bot] picture lock[bot] on 24 Jun 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nimo23 picture nimo23  路  4Comments
vousys picture vousys  路  4Comments
seme1 picture seme1  路  5Comments
ahmeddaif1 picture ahmeddaif1  路  4Comments
DavidGOrtega picture DavidGOrtega  路  3Comments