3. pull Hook on multiple pages

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

pull Hook on multiple pages

  • Z

    Hi
    I want to reload pages as I pull the page down. My html pages are some thing like bellow:

     <template id="page1.html">
    <ons-page name='page1'>
      <ons-toolbar class="topbar">
        --------------------
      </ons-toolbar>
      
      <div class="container">
       
        
      <ons-pull-hook class="pull-hook">
          Pull to refresh
        </ons-pull-hook> -->
        <!-- <script src="../js/pull.js"></script> -->
    </ons-page>
  </template>

 <template id="page2.html">
    <ons-page name='page2'>
      <ons-toolbar class="topbar">
        ------------------------
      </ons-toolbar>
      
      <div class="container">
       
        
      <ons-pull-hook class="pull-hook">
          Pull to refresh
        </ons-pull-hook> -->
        <!-- <script src="../js/pull.js"></script> -->
    </ons-page>
  </template>

,,,,,

    And the code in pull.js is as bellow

    var pullHook = document.getElementsByClassName('pull-hook');
    
for (var i = 0; i < pullHook.length; i++) { 
  pullHook[i].addEventListener('changestate', function(event) {
    var message = 'Message';

    switch (event.state) {
      case 'initial':
        message = 'Pull to refresh';
        break;
      case 'preaction':
        message = 'Release';
        break;
      case 'action':
        message = 'Loading...';
         var pg=document.querySelector('#navigator').topPage.name;
         document.querySelector('#navigator').pushPage(pg);
        
        break;
    }

    pullHook.innerHTML = message;
  });

  pullHook.onAction = function(done) {
    
* 
* 
* list item
    setTimeout(done, 1000);
  };
}

    Though its working ( pages refresh ) but I don’t the the messages in code on various events (such as “'Pull to refresh”, “Loading…”).
    Also I have to load pull.js on every page.

    My question is am I doing it right?

    0
  • E
    administrators

    If you put pull.js in the head of your index.html file, you should only need it once.

    I think the reason your code is not working unless you put a script tag with each pull hook is that your pages are defined as templates, so when documents.getElementsByClassName is called, it won’t find the pull hooks from the other templates because they are not loaded in the DOM.

    If you still need help with the messages, can you make a working example of your code in https://onsen.io/playground/ and link it here so I can run it?

    0